vue嵌套路由传递参数_vue-11-路由嵌套-参数传递-路由高亮

1, 新建vue-router 项目

vue init webpack vue-router-test

是否创建路由: 是

2, 添加路由列表页

在 component下创建 NavList 页面

• 首页
• 课程
• 专家

name:"NavList",

data() {

return {

index:"/",

course:"/course",

master:"/master",

}

}

}

width:100%;

height: 50px;

background: #f1f1f1;

}

ul {

list-style: none;

}

li {float: left;

margin: 20px;

}

3, 添加子页面

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

首页

export default {

name:"index",

components: {NavList},

data() {

return {

}

}

}

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 等子页面

java

name:"java"}

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

使用 router-link 进行页面跳转

添加 router-view 指定显示区域

路径导航使用全路径

• java
• python
• bigdata

视图区域

export default {

name:"course",

components: {NavList},

data() {

return {

java:"/course/java",

python:"/course/python",

}

}

}

}

.left {

margin-left: 0;

}

.right {

margin-left: 50px;

}

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 页面, 接受参数

专家: {{ $route.params.count }}-{{ $route.params.type.name }}

name:"master"}

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

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

默认是 router-link-active, 更改

mode: "history",

linkActiveClass:"active",

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

.active {

color: red

}

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

首页