尚硅谷视频
概念
1、vue-router的理解
2、对SPA（单页面）应用的理解
3、什么是路由
4、路由分类
基本使用
1、安装vue-router，命令：npm i vue-router
2、应用插件：Vue.use(VueRouter)
3、编写router配置项：
// 引入VueRouter
import VueRouter from 'vue-router'
// 引入组件
import Home from './Home'
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
routes: [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/vuex',
name: 'vuex',
component: () => import(/* webpackChunkName: "base" */ '../views/vuex/Home')
},
]
})
// 暴露router
export default router
4、实现切换（active-class可配置高亮样式）
<router-link active-class="active" to="/home">Home</router-link>
5、指定展示位置
<router-view />
几个注意事项
路由的query参数
1、传递参数
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link
:to="{
path: '/home/message/detail',
query: {
id: 666,
title: '你好'
}
}"
>跳转</router-link>
2、接收参数
$route.query.id
$router.query.title
路由params参数
1、配置路由，生命接收params参数
{
path: '/home',
component: Home,
children: [
{
path: 'datail/:id/:title', // 使用占位符生命接收params参数
name: 'detail',
component: Detail
}
]
}
2、传递参数
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/detail/666/你好">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link
:to="{
name: 'detail',
params: {
id: 666,
title: '你好'
}
}"
>跳转</router-link>
$route.params.id
$route.params.name
路由的props配置
path: '/ref',
name: 'ref',
title: 'ref父子组件传值',
component: () => import(/* webpackChunkName: "base" */ '../views/Ref/fu'),
children: [
{
path: 'refzi',
// path: 'refzi/:id/:title',
name: 'refzi',
title: 'ref父子组件传值',
// props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传递给‘ref’组件
// 传递的死数据
// props: { a: 1, b: 'hello' },
// props的第二种写法，值为布尔值。若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给‘ref‘组件
// props: true,
// props的第三种写法，值为函数。使用query
// props($route) {
props({ query }) { // { query }：结构赋值
// console.log($route)
return { id: query.id, title: query.title }
},
component: () => import(/* webpackChunkName: "base" */ '../views/Ref/ref')
}
]
}
<router-link>的replace属性
1、作用：控制路由跳转时操作游览器历史记录的模式。
2、浏览器的历史记录有两种写入方式：分别是push和replace,push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push。
3、如何开启replace模式：<router-link replace></router-link>。
编辑路由组件
this.$router.push({
path: '/ref/refzi',
query: {
id: 666,
title: '你好啊'
}
})
this.$router.replace({
name: 'refzi',
params: {
id: 666,
title: '你好啊'
}
})
this.$router.back() // 后退
this.$router.forward() // 前进
this.$router.go(n) // 前进或后退n个历史记录（负数：后退，正数：前进）
缓存路由组件
1、作用：让不展示的路由组件保存挂载状态，不被销毁。
2、具体代码：
<!-- includce：要作用于哪个组件，name：组件中定义的name的值 -->
<!-- 缓存一个：include="name" ；缓存多个：:include="['name1', 'name2']" -->
<keep-alive include="name">
<router-view />
</keep-alive>
两个新的生命周期钩子
1、作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2、具体名字：
路由守卫
1、作用：对路由进行权限控制
2、分类：全局守卫、独享守卫、组件内守卫
3、全局守卫：
// 全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to, from, next) => {
console.log('beforeEach', to, from)
if(to.meta.isAuth) { // 判断当前路由是否需要进行权限控制
if(localStorage.getItem('homem') === 'yes') { // 权限控制的具体规则
next() // 放行
} else {
alter('暂无权限查看')
}
} else {
next() // 放行
}
})
// 全局后置守卫：初始化时执行、每次路由切换之后执行
router.afterEach((to, from) => {
console.log('afterEach', to, from)
if(to.meta.title) {
document.title = to.meta.title // 修改网页的title
} else {
document.title = 'vue_test'
}
})
4、独享守卫：
// 全局前置守卫：初始化时执行、每次路由切换前执行
beforeEnter((to, from, next) => {
console.log('beforeEnter', to, from)
if(to.meta.isAuth) { // 判断当前路由是否需要进行权限控制
if(localStorage.getItem('homem') === 'yes') { // 权限控制的具体规则
next() // 放行
} else {
alter('暂无权限查看')
}
} else {
next() // 放行
}
})
5、组件内守卫：
// 进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter((to, from, next) => {
})
// 离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave((to, from, next) => {
})
路由器的两种工作模式
1、对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
2、hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
3、hash模式：
4、histoty模式：
