1、一句话概括:路由配置的meta对象里的信息(vue2)
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
从栗子可以看出就是给路由添加了一个自定义的meta对象,并在里面设置了一个requiresAuth状态为true.
它有什么用
从下面的另一个官方栗子里已经给出了答案.
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
//对matched不了解的建议看官方api文档,或我7.1节的说明
//数组some方法,如果meta.requiresAuth为ture,则返回true.此时,说明进入该路由前需要判断用户是否已经登录
if (!auth.loggedIn()) { //如果没登录,则跳转到登录页
next({
path: '/login',
query: { redirect: to.fullPath } //官方例子的这个小细节很好,通过query将要跳转的路由路径保存下来,待完成登录后,就可以直接获取该路径,直接跳转到登录前要去的路由
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
我们可以通过在meta里设置的状态,来判断是否需要进行登录验证.如果meta里的requiresAuth为true,则需要判断是否已经登录,没登录就跳转到登录页.如果已登录则继续跳转.
此时,有人可能会说,前面说的path,params,query都可以存储信息,作为登录验证的状态标记.的确,它们也可以达到同样的效果.如果是少量单个的验证,使用它们问题不大. 但如果是多个路由都需要进行登录验证呢?path,params,query是把信息显性地存储在url上的.并且多个路径都把一个相同的状态信息加在url上.这样就使url不再单纯,并且也很不优雅美观. 所以要优雅要隐性地传递信息,就使用meta对象吧!
2、怎么切换页面换title呢?(vue3)
import {
createRouter,
createWebHashHistory
} from 'vue-router'
import homeModel from '../views/homeModel/route'
const routes = [
{
path: '/myOrder',
name: 'myOrder',
component: () => import('../components/order/myOrder.vue'),
meta: {
title: '我的订单',
intercept: true,
}
},
{
path: '/myRoll',
name: 'myRoll',
component: () => import('../components/roll/myRoll.vue'),
meta: {
title: '我的礼券',
intercept: true,
}
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
router.beforeEach((to, go) => {
// 从本地存储中取出token
let token = localStorage.getItem('token')
if (token && token != 'null') { // 证明有用户
return true //本地存储有token 用户可以进入页面
} else {
if (to.meta.intercept) { // to.meta.intercept 为true 说名要拦截这个页面
return {
path: '/login',
// query: {
// ...to.query
// }
} // return相当于vue2 的next
} else { // 否则就可以进去这个页面
return true
}
}
})
// 切换页面换title 全局的前置守卫
router.afterEach((to, next) => {
//获取 document.querySelector title = 直接改掉 这么简单
document.querySelector('title').innerText = to.meta.title
})
export default router