src/router/index.js

import VueRouter from 'vue-router'

//引入组件

import About from '../components/117/About.vue'

import Home from '../components/117/Home.vue'

import News from '../components/117/News.vue'

import Message from '../components/117/Message.vue'

import Detail from '../components/117/Detail.vue'

//创建路由器

const router = new VueRouter({

    /*

    注意这里是routes不是routers不要写错了,

    否则router-view会失效，且控制台会报No routes found in router

    */

    routes:[

        {

            path:'/about',//路由

            component:About,//组件名

            meta:{title:'关于我'},

            //独享路由守卫

            beforeEnter:(to,from,next)=>{

                //可以加一些逻辑到这里

                next()

            }

        },

        {

            path:'/home',//路由

            component:Home,//组件名

            meta:{title:'首页'},

            children:[

                {

                    path:'news',//对应home/news

                    component:News,

                    meta:{title:'新闻'},

                },

                {

                    path:'message',

                    component:Message,

                    meta:{title:'消息'},

                    children:[

                        //query传参方式:?id=xx&title=yyy

                        {

                            name:'xiangqing',//路由命名

                            path:'detail',

                            component:Detail,

                            //props的第三种写法，值为函数

                            props($route){

                                return {

                                    id:$route.query.id,

                                    title:$route.query.title

                                }

                            },

                            //是否要验证权限

                            meta:{title:'详情',isAuth:true}

                        }

                        //params传参方式:id/xx/title/yyy

                        // {

                        //     name:'xiangqing',//路由命名,params方式必须用name方式

                        //     path:'detail/:id/:title',

                        //     component:Detail,

                        //     //props的第一种写法，什为对象，该对象中的所有key-value都会以props的形式传给detail组件

                        //     //props:{a:1,b:'hello'}

                        //     //props的第二种写法，值为布尔值，若为true，就会把该路由组件收到的所有params参数，以props的形式传给detail组件

                        //     //props:true,//注意，这种只能适用params传参形式，不能适用query传参

                        // }

                    ]

                }

            ]

        },

    ]

})

//全局前端路由守卫

//路由切换之前被调用，可以用来做权限控制或设置页面title等

router.beforeEach((to,from,next)=>{

    //设置页面title

    document.title=to.meta.title

    // if(localStorage.getItem('xxxx')==='xxx'){

    //如果有很多路由要判断就不不好写了，在路由配置上加meta:{isAuth:false或true}

    //if(to.path==='/home/news'||to.path==='/home/message'){

    //if(!to.meta.isAuth){

        next()//放行

    //}

})

//全局后置路由，初始化时执行、每次路由切换之后被调用

router.afterEach((to,from)=>{

})

export default router

About.vue

<template>

<h2>我是About的内容</h2>

</template>

<script>

export default {

    name:'About',

    //组件内路由:通过路由规则，进入该组件时被调用

    beforeRouteEnter (to, from, next) {

        // ...

        next()

    },

    //组件内路由:通过路由规则，离开该组件时被调用

    beforeRouteLeave (to, from, next) {

        // ...

        next()

    }

}

</script>

<style>

</style>