本文共 2787 字，大约阅读时间需要 9 分钟。

1.说明

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反 掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

2.安装

基于第一个 vue-cli 进行测试学习;先查看node_modules中是否存在 vue-router

vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你 的项目目录，输入下面命令。

npm install vue-router --save-dev

import Vue from 'vue' import VueRouter from 'vue-router' // 显示的使用 Vue.use(VueRouter);

main.js

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import VueRouter from "vue-router"Vue.config.productionTip = false//显示声明使用VueRouterVue.use(VueRouter)/* eslint-disable no-new */new Vue({
     el: '#app',  components: {
    App },  template: '
   '})

3.测试

可以先清理掉多余的文件：Src 下面就很干净了

3.我们在新建一个 Main.vue 组件

4.安装路由,在src目录下,新建一个文件夹 : router ,专门存放路由，写入 index.js

import Vue from 'vue'// 导入路由插件import VueRouter from 'vue-router'// 导入上面定义的组件import Content from '../components/Content'import Main from '../components/Main'// 安装路由Vue.use(VueRouter)// 配置路由export default new VueRouter({
   routes:[  {
       // 路由路径    path: '/content',    // 路由名称    name: 'content',    // 跳转到组件,注意不要写成components    component:Content  },  {
       // 路由路径    path: '/main',    // 路由名称    name: 'main',    // 跳转到组件    component:Main  }]});

5.、在 main.js 中配置路由

import Vue from 'vue'import App from './App'// 导入上面创建的路由配置目录import router from "./router"Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
     el: '#app',  // 配置路由  router,  components: {
    App },  template: '
   '})

6.在 App.vue 中使用路由

7.在控制台测试： npm run dev

4.路由模式与404

路由模式有两种：

• hash： 路径带 # 符号，如 http://localhost/#/login
• history： 路径不带 # 符号，如 http://localhost/login

处理 404 创建一个名为 NotFound.vue 的视图组件，代码如下：

修改路由配置，代码如下：

import Vue from 'vue'// 导入路由插件import VueRouter from 'vue-router'// 导入上面定义的组件import Content from '../components/Content'import Main from '../components/Main'import NotFound from "../components/NotFound";// 安装路由Vue.use(VueRouter)// 配置路由export default new VueRouter({
     mode:'history',  routes:[    {
         // 路由路径      path: '/content',      // 路由名称      name: 'content',      // 跳转到组件      component:Content    },    {
         // 路由路径      path: '/main',      // 路由名称      name: 'main',      // 跳转到组件      component:Main    },    {
         // 路由路径      path:'*',      // 路由名称      name: 'notFound',      // 跳转到组件      component:NotFound    }  ]});

结果

转载地址：http://cluki.baihongyu.com/