1.简介
由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么?这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。
有的小伙伴会有疑虑,为什么我们不能像原来一样直接用
1 | ### 2.解读router/index.js文件 |
import Vue from ‘vue’ //引入Vue
import Router from ‘vue-router’ //引入vue-router
import Hello from ‘@/components/Hello’ //引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: ‘/‘, //链接路径
name: ‘Hello’, //路由名称,
component: Hello //对应的组件模板
}
]
})
1 | ### 3.增加一个Hi的路由和页面 |
1 | - 引入 Hi组件:我们在router/index.js文件的上边引入Hi组件 ```import Hi from '@/components/Hi' |
- 增加路由配置:在router/index.js文件的routes[]数组中,新增加一个对象,代码如下。
1
2
3
4
5{
path:'/hi',
name:'Hi',
component:Hi
}
4.router-link制作导航
现在通过在地址栏改变字符串地址,已经可以实现页面内容的变化了。这并不满足需求,我们需要的是在页面上有个像样的导航链接,我们只要点击就可以实现页面内容的变化。制作链接需要
1 | ```<router-link to="/">[显示字段]</router-link> |
1.改造App.vue的导航代码
App.vue代码,注意
1 | ``` |
2.改写components/Hi.vue页面
把Hi.vue改成一个通用的模板,加入标签,给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都相当于“Hi页面”的子页面,有点想继承关系。我们在“Hi页面”里加入标签。
Hi1.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am Hi1!'
}
}
}
</script>
<style scoped>
</style>Hi2.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am Hi2'
}
}
}
</script>
<style scoped>
</style>
3.Hi.vue代码
注意新增的router-view
1 | <template> |
4.修改router/index.js代码
我们现在导航有了,母模板和子模板也有了,只要改变我们的路由配置文件就可以了。子路由的写法是在原有的路由配置下加入children字段。
1 | children:[ |
children字段后边跟的是个数组,数组里和其他配置路由基本相同,需要配置path和component。具体看一下这个子路由的配置写法。
1 | import Vue from 'vue' |