vue-cli3学习笔记 第3节 vue-router 路由跳转与嵌套，定向，别名

文档：https://router.vuejs.org/zh/

一。路由跳转

新建 components\A.vue文件，添加如下代码：

<template>
<div>
A
</div>
</template>

新建 components\B.vue文件，添加如下代码：

<template>
<div>
B
</div>
</template>

修改router/index.js文件，添加如下代码：

import A from '../components/A.vue'
import B from '../components/B.vue'
{
path: '/a',
name: 'A',
component:A
},
{
path: '/b',
name: 'B',
component:B
},

修改 components\first.vue，添加如下代码：

<template>
<div>
test
<router-link to="/a">转向A页面</router-link><br/>
<router-link to="/b">转向B页面</router-link><br/>
</div>
</template>

二。路由嵌套

新建 components\C.vue文件，添加如下代码：

<template>
<div>
C
</div>
</template>

新建 components\D.vue文件，添加如下代码：

<template>
<div>
D
</div>
</template>

修改router/index.js文件，添加如下代码：

import C from '../components/C.vue'
import D from '../components/D.vue'

{
path: '/',
name: 'Home',
component:First,
children:[
{
path: '/c',
name: 'C',
component:C
},
{
path: '/d',
name: 'D',
component:D
}
]
},

修改 components\first.vue，添加如下代码：

<template>
<div>
test
<router-link to="/c">c页面在当前页显示</router-link><br/>
<router-link to="/d">d面面在当前页显示</router-link><br/>
<router-view></router-view>
</div>
</template>

三。重定向

下面例子是从 /a 重定向到 /b：

修改router/index.js文件，添加如下代码：

const router = new VueRouter({
routes: [
{
path: '/a',
redirect: '/b'
}
]
})


重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
routes: [
{
path: '/a',
redirect: { name: 'foo' }
}
]
})


甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({
routes: [
{
path: '/a',
redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}
}
]
})

四。别名

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

const router = new VueRouter({
routes: [
{
path: '/a',
component: A,
alias: '/b'
}
]
})

五。编程式的导航

<template>
<div>
b页面<router-link to="/">返回</router-link>
{{msg}}
<hr/>
<li v-for="data in list" @click="onclick">{{data}}</li>
<hr/>
</div>
</template>
<script>
import router from '../router'
export default{
data() {
return{
msg:this.$base64.encode('dankogai'),
list:['film1','film2','film3']
}
},
methods:{
onclick:function(){
router.push('/axios2')
}
}
}
</script>

编程式的导航与动态路由匹配

修改router/index.js文件，添加如下代码：
{
path:'/axios2/:id', //动态路由匹配
name:'Axios2',
component:()=>import('../components/Axios2.vue')
}


Axios2.vue 获取传过来的ID

{{$route.params.id}}


B.vue

template>
<div>
b页面<router-link to="/">返回</router-link>
{{msg}}
<hr/>
<li v-for="(data,index) in list" @click="hclick(index)">{{data}}</li>
<hr/>
</div>
</template>
<script>
import router from '../router'
export default{
data() {
return{
msg:this.$base64.encode('dankogai'),
list:['film1','film2','film3']
}
},
methods:{
hclick:function(index){
router.push("/testid/"+index) //编程式的导航
}
}
}
</script>