} 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 } } })
