路由跳转时,组件会被销毁。
- 配置路由,声明接收params参数
path: 'detail/:id/:title'
- 传递参数
// to的字符串写法
<router-link :to="`/home/detail/123/标题`"></router-link>
// to的对象写法
<router-link :to="{
name: 'detail',
params: {
id: 123,
title: xxx
}
}">
</router-link>
路由携带params参数时,如果使用to的对象写法,则不能使用path配置项,必须使用name
作用:让路由组件更方便的收到参数
{
name: 'detail',
path: 'detail/:id/:title',
component: Detail,
// 第一种写法,props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件(值是写死的)
props: {a: 123, b:222}
// 第二种写法,props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
props: true
// 第三种写法,props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
props(route) {
return {
id: route.query.id,
title: route.query.title
}
}
}
Detail组件:
props: ['id', 'title']
作用:让不展示的路由组件保持挂载,不被销毁。
// Detail 为组件名!!!
<keep-alive include="Detail">
// 缓存多个路由组件
<keep-alive :include="['Detail', 'Xxx']">
<router-view/>
</keep-alive>
keep-alive和activated、deactivated搭配使用
路由守卫
作用:对路由进行权限控制
分类:全局守卫、独享守卫、组件内守卫
1. 全局守卫
const router = new VueRouter({......})
// 全局前置守卫,初始化时执行,每次路由切换前执行
router.beforeEach((to, from, next) => {
//判断逻辑
next();
})
// 全局后置守卫,初始化时执行,每次路由切换后执行
router.afterEach((to, from) => {
// 判断逻辑
})
2. 独享守卫
在路由配置文件里面写
{
name: xxx,
path: xxx,
component: xxx,
meta: {xxx},
beforeEnter((to, from, next) => {
// 判断逻辑
next();
})
}
3. 组件内守卫
// 进入守卫,通过路由规则,进入该组件时被调用
beforeRouterEnter(to, from, next) {
// xxx
next();
},
// 离开守卫,通过路由规则,离开该组件时被调用
beforeRouterLeave(to, from, next) {
// xxx
next();
}
- 对于一个url来说,#及其候面的内容就是hash值
- hash值不会包含在http请求中,即hash值不会带给服务器
- 比较
- hash模式:
(1)若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法
(2)兼容性较好 - history模式
(1)兼容性和hash模式相比略差
(2)应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题