Vue_Demo/20_脚手架/vue_code/src/router/index.js

import VueRouter from "vue-router";

// 引入组件
import About from "@/pages/About.vue"
import Home from "@/pages/Home.vue"
import News from "@/pages/News.vue"
import Message from "@/pages/Message.vue";
import Detail from "@/pages/Detail.vue";

// 创建一个路由器
const router = new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About,
            meta: {
                title: '关于'
            }
        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            meta: {
                title: '主页'
            },
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News,
                    meta: {
                        isAuth: true,
                        title: '主页'
                    }
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    meta: {
                        isAuth: true,
                        title: '主页'
                    },
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail/:id/:title',
                            component: Detail,
                            meta: {
                                title: '详情'
                            },
                            // props的第一种写法，key-val格式，通过props的方式传给detail组件
                            // props: {a:1,b:'hello'}
                            // props的第二种写法，布尔值，若布尔值为真，就会把路由组件收到的params参数以props的形式传给detail
                            // props: true
                            // props的第三种写法，函数形式
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            }
                            // 解构赋值的写法
                            // props({query:{id,title}}) {
                            //     return {id, title}
                            // }
                        }
                    ]
                }
            ]
        },
    ]
})

// 全局前置路由守卫--初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)
    // if (to.name === 'xinwen' || to.name === 'xiaoxi') {
    // if (to.path === '/home/news' || to.path === '/home/message') {
    if (to.meta.isAuth) {
        if (localStorage.getItem('school') === 'atguigu') {
            next()
        }else{
            alert('学校名称错误，无权限查看')
        }
    }else{
        next()
    }
})

// 全局后置路由守卫--初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from)=>{
    console.log('后置路由守卫', to, from)
    document.title = to.meta.title || '系统'
})

export default router