Vue.js尚硅谷视频学习笔记(第5 章：vue-router)

内容来自尚硅谷课件整理

第5 章：vue-router

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. 使用路由组件标签

1. <router-link>: 用来生成路由链接

<router-link to="/xxx">Go to XXX</router-link>

2. <router-view>: 用来显示当前路由组件界面

<router-view></router-view>

5.2. 基本路由

路由组件

Home.vue
About.vue

应用组件: App.vue

<div>
	<!--路由链接-->
	<router-link to="/about">About</router-link>
	<router-link to="/home">Home</router-link>
	<!--用于渲染当前路由组件-->
	<router-view></router-view>
</div>

路由器模块: src/router/index.js

export default new VueRouter({
	routes: [
		{
			path: '/',
			redirect: '/about'
		},
		{
			path: '/about',
			component: About
		},
		{
			path: '/home',
			component: Home
		}
	]
})

注册路由器: main.js

import Vue from 'vue'
import router from './router'
// 创建vue 配置路由器
new Vue({
	el: '#app',
	router,
	render: h => h(app)
})

优化路由器配置

linkActiveClass: ‘active’, // 指定选中的路由链接的class

总结: 编写使用路由的3 步

1. 定义路由组件
2. 注册路由
3. 使用路由

<router-link>
<router-view>

5.3. 嵌套路由

子路由组件

News.vue
Message.vue

配置嵌套路由: router.js

path: '/home',
component: home,
children: [
	{
		path: 'news',
		component: News
	},
	{
		path: 'message',
		component: Message
	}
]

路由链接: Home.vue

<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>
<router-view></route-view>

5.4向路由组件传递数据

方式1: 路由路径携带参数(param/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

方式2: 属性携带数据

<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. 编程式路由导航

相关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): 请求下一个记录路由