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

1, 新建vue-router 项目

vue init webpack vue-router-test

是否创建路由: 是

2, 添加路由列表页

在 component下创建 NavList 页面

<template>
<div>
<div class="navlist">
<ul>
<li><router-link :to="index">首页</router-link></li>
<li><router-link :to="course">课程</router-link></li>
<li><router-link :to="master">专家</router-link></li>
</ul>
</div>

</div>
</template>

<script>
export default {
name: "NavList",
data() {
return {
index: "/",
course: "/course",
master: "/master",
}
}
}
</script>

<style scoped>
.navlist {
width: 100%;
height: 50px;
background: #f1f1f1;
}
ul {
list-style: none;
}
li {
float: left;
margin: 20px;
}
</style>

3, 添加子页面

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

<template>
<div>
<NavList/>
首页
</div>
</template>

<script>
import NavList from "./NavList";
export default {
name: "index",
components: {NavList},
data() {
return {

}
}
}
</script>

<style scoped>

</style>

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

<template>
<div id="app">
<!--<img src="./assets/logo.png">-->
<!--<NavList/>-->
<router-view/>

</div>
</template>

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

7, 路由嵌套

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

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

<template>
<div>
java
</div>
</template>

<script>
export default {
name: "java"
}
</script>

<style scoped>

</style>

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

使用 router-link 进行页面跳转

添加 router-view 指定显示区域

路径导航使用全路径

<template>
<div>
<NavList/>

<div class="left">
<ul>
<li><router-link :to="java">java</router-link></li>
<li><router-link :to="python">python</router-link></li>
<li>bigdata</li>
</ul>
</div>

<div class="right">
视图区域
<router-view/>
</div>

</div>
</template>

<script>
import NavList from "./NavList";
export default {
name: "course",
components: {NavList},
data() {
return {
java: "/course/java",
python: "/course/python",
}
}
}
</script>

<style scoped>
.left, .right {
float: left;
}
.left {
margin-left: 0;
}
.right {
margin-left: 50px;
}
</style>

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={} 的形式进行传递参数

<li><router-link :to="{ name: 'Master', params:{count: 100, type: obj}}">专家</router-link></li>

8.3) 在 master 页面, 接受参数

<template>
<div>
专家: {{ $route.params.count }} - {{ $route.params.type.name }}
</div>
</template>

<script>
export default {
name: "master"
}
</script>

<style scoped>

</style>

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

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

默认是 router-link-active, 更改

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

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

.active {
color: red
}

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

<li><router-link :to="index" exact>首页</router-link></li>