5.1. 理解
5.1.1. 说明
1）官方提供的用来实现 SPA 的 vue 插件
2）github:https://github.com/vuejs/vue-router
3）中文文档:http://router.vuejs.org/zh-cn/
4）下载:
npm install vue-router --save
5.1.2. 相关 API 说明
1）VueRouter(): 用于创建路由器的构建函数
new VueRouter({
// 多个配置项
})
2）路由配置
routes: [
{ // 一般路由
path: '/about',
component: About
},
{ // 自动跳转路由
path: '/',
redirect: '/about'
}
]
3）注册路由器
import router from './router'
new Vue({
router
})
4）使用路由组件标签
a.<router-link>: 用来生成路由链接
<router-link to="/xxx">Go to XXX</router-link>
b.<router-view>: 用来显示当前路由组件界面
<router-view></router-view>
5.2. 基本路由
5.2.1. 路由组件
Home.vue
About.vue
5.2.2. 应用组件: App.vue
<div>
<!--路由链接-->
<router-link to="/about">About</router-link>
<router-link to="/home">Home</router-link>
<!--用于渲染当前路由组件-->
<router-view></router-view>
</div>
5.2.3. 路由器模块: src/router/index.js
export default new VueRouter({
routes: [
{
path: '/',
redirect: '/about'
},
{
path: '/about',
component: About
},
{
path: '/home',
component: Home
}
]
})
5.2.4. 注册路由器: main.js
import Vue from 'vue'
import router from './router'
// 创建 vue 配置路由器
new Vue({
el: '#app',
router,
render: h => h(app)
})
5.2.5. 优化路由器配置
linkActiveClass: 'active', // 指定选中的路由链接的 class
5.2.6. 总结: 编写使用路由的 3 步
1）定义路由组件
2）注册路由
3）使用路由
<router-link>
<router-view>
5.3. 嵌套路由
5.3.1. 子路由组件
News.vue
Message.vue
5.3.2. 配置嵌套路由: router.js
path: '/home',
component: home,
children: [
{
path: 'news',
component: News
},
{
path: 'message',
component: Message
}
]
5.3.3. 路由链接: Home.vue
<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>
<router-view></route-view>
5.4. 向路由组件传递数据
5.4.1. 方式 1: 路由路径携带参数(params/query)
1）配置路由
children: [
{
path: 'mdetail/:id',
component: MessageDetail
}
]
2）路由路径
<router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link>
3）路由组件中读取请求参数
this.$route.params.id
5.4.2. 方式 2: <router-view>属性携带数据
<router-view :msg="msg"></router-view>
5.5. 缓存路由组件对象
5.5.1. 理解
1）默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
2）如果可以缓存路由组件对象, 可以提高用户体验
5.5.2. 编码实现
<keep-alive>
<router-view></router-view>
</keep-alive>
5.6. 编程式路由导航
5.6.1. 相关 API
1）this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2）this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
3）this.$router.back(): 请求(返回)上一个记录路由
4）this.$router.go(-1): 请求(返回)上一个记录路由
5）this.$router.go(1): 请求下一个记录路由
网友评论