1, 新建vue-router 项目

vue init webpack vue-router-test

是否创建路由: 是

2, 添加路由列表页

在 component下创建 NavList 页面

 

3, 添加子页面

index.vue, master.vue, course.vue等, 仅展示 index.vue

 

4, 在index.js 中导入子页面, 配置路径和页面关系

import Vue from 'vue'import Router from 'vue-router'import index from '@/components/index'import Course from '@/components/course'import Master from '@/components/master'import Java from '@/components/course/java'import Python from '@/components/course/python'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      name: 'index',      component: index    },    {      path: '/course',      name: 'Course',      component: Course,    },    {      path: '/master',      name: "Master",      component: Master    }  ]})

5, 在app vue 中, 添加路由显示位置

router-view

6, 使用 npm run dev 运行, 即可看到初始效果

7, 路由嵌套

有时候, 在二级页面下还需要新的子页面, 就需要使用路由嵌套功能

7.1) 在 component中添加 java.vue, python.vue 等子页面

7.2), 在course 中 引入路由嵌套

使用 router-link 进行页面跳转

添加 router-view 指定显示区域

路径导航使用全路径

7.3) 在index.js 中指定 子嵌套关系

使用 redirect 指定一开始进入的默认页面

{      path: '/course',      name: 'Course',      component: Course,      // 默认进入重定向      redirect: "/course/java",      // 子嵌套      children: [        {          path: "java",          name: "Java",          component: Java        },        {          path: "python",          name: "Python",          component: Python        }      ]    },

 8, 参数传递

在vue中, 可以通过参数传递, 将值或者对象传递给路由子页面

8.1) 定义要传递的对象

data() {      return {        index: "/",        course: "/course",        master: "/master",        obj: {          name: "wenbronk",          age: 18        }      }    }

8.2), 在 router-link 中, 使用 :to={} 的形式进行传递参数

      
       专家
      

8.3) 在 master 页面, 接受参数

9, 路由高亮, 实现点击的呈现高亮效果

9.1), 在index.js 中, 添加 路由选中class名

默认是 router-link-active, 更改

mode: "history",  linkActiveClass: "active",

9.2), 在全局中配置, css 样式

.active {    color: red  }

9.3), 对于匹配 / 的, 会始终显示高亮, 需要添加 exact 属性; 

      
       首页