router.js文件
import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' // import List from './views/List.vue' import Detail from './views/Detail.vue' Vue.use(Router) const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', component: Home, children: [{ path: '/list', name: 'list', component: () => import('./views/List.vue') }, { path: '/detail/:id', component: Detail, props: true }] }, { path: '/about', name: 'about', meta: {auth: true}, // 需要认证---路由守卫 // beforeEnter(){}, // 路由级钩子 component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] }) // 全局守卫,路由的全局钩子 router.beforeEach((to, from, next) => { if(to.meta.auth && !window.isLogin){ if(window.confirm('请登录')){ window.isLogin = true next() // 登录成功,继续下一步 }else{ next('/') // 放弃会首页 } }else { next() // 不需要登录,继续 } }) export default router
About.vue中
<template> <div class="about"> <h1>This is an about page</h1> </div> </template> <script> export default { // beforeRouteEnter(){} // 组件级钩子 } </script>