初学111vue-router

嵌套路由

<div id="app">
<!-- 跳转相应的路由-->
    <router-link :to="{path:'/home'}">首页</router-link>
    <router-link :to="{path:'/user'}">用户中心</router-link>
    <router-link :to="{path:'/about'}" exact>关于我们</router-link>
    <router-link :to="{path:'/login'}">登录</router-link>
    <router-link :to="{path:'/register'}">注册</router-link>
<!--将上述的显示出来-->
    <router-view></router-view>
</div>
<!--显示的一个嵌套路由-->
<template id="about">
    <div class="about">
        <ul>
            <li><router-link to="/about/concat">联系我们</router-link></li>
            <li><router-link to="/about/partner">合作伙伴</router-link></li>
            <li><router-link to="/about/address">公司地址</router-link></li>
        </ul>
        <router-view class="heaven"></router-view>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src='https://unpkg.com/vue-router/dist/vue-router.js'></script>
<script>
    //定于相应的子组件
    let home = {
        data(){
            return {
                a:'home组件'
            }
        },
        template:'<div>首页</div>',
        created(){
        //在创建页面的时候生成相应的页面的标题
            document.title = this.$route.meta.title
            // console.log('首页 created')
        }
    }

    let user = {
        template:'<div>用户中心</div>',
        created(){
            document.title = this.$route.meta.title
            // console.log('用户中心 created')
        }
    }
    //定氮仪一个嵌套的路由
    let about = {
        template:'#about'
    }
    let login = {
        template:'<div>登录</div>'
    }
    let register = {
        template:'<div>注册</div>'
    }
//定义嵌套路由的子组件
    let concat = {
        template:'<div>110</div>'
    }
    let partner = {
        template:'<div>阿里云大学</div>'
    }

    let address1 = {
        template:'<div>湖南省长沙市岳麓区</div>'
    }
    // 路由和组件的映射表
    let routes = [
        {
            path:'/home',
            component:home,
            //页面的标题放在route.meta.title，通过这个显示相应组件的标题
            meta:{
                title:'首页'
            }
        },
        {
            path:'/user',
            component:user,
            meta:{
                title:'用户中心'
            }},
        {
            path:'/about',
            component:about,
            //配置子路由，子路由通过children来配置
            children:[  //配置子路由
                {path:'concat',component:concat},
                {path:'partner',component:partner},
                {path:'address',component:address1}
            ]
        },
        {path:'/login',component:login},
        {path:'/register',component:register}
    ]

    //实例化路由对象
    let router = new VueRouter({
        routes,
        //linkExactActiveClass：全局配置 精确激活的默认的 class
        linkExactActiveClass:'active'
    })

    let vm = new Vue({
        el:'#app',
        router
    })
</script>

路由守卫

<div id="app">

    <router-link :to="{path:'/home'}">首页</router-link>
    <router-link :to="{path:'/user'}">用户中心</router-link>
    <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src='https://unpkg.com/vue-router/dist/vue-router.js'></script>

<script>

    let home =  {
        template:'<div>首页</div>',
        //找到相应的路由后，执行相应的模板
        beforeRouteEnter(to,from,next){   // 组件独享函数  3
            console.log('beforeRouteEnter')

            // console.log(this)
            // next( heaven=>{
            //     console.log(heaven)
            // });


            // debugger
        },
        beforeCreate(){
            console.log('beforeCreate')
        }

    }
    let user =  {
        template:'<div>用户中心</div>'
    }

    let routes = [
        {
            //通过全局前置守卫，可以知道到/home中的路由去，然后执行相应的模板
            path:'/home',
            component:home,
            //路由独享函数，通过from，to知道他的来源于去出
            beforeEnter(to,from,next){  //路由独享函数  2
                console.log('beforeEnter')
                // debugger
                next()//路由放行
            }
        },
        {
            path: '/user',
            component: user,
        }
    ]
    let router = new VueRouter({
        routes,
    })

    //全局前置守卫   1
    router.beforeEach((to,from,next)=>{
        //form表示从哪里来，to表示到哪里去
        console.log('beforeEach')
        next(); //放行
        // next(false)
        // debugger

    })
//找到相应的模板后，执行全局解析守卫
    //全局解析守卫    4
    router.beforeResolve((to,from,next)=>{
        console.log('beforeResolve')
        // debugger
        next();

    })

//执行完全局解析守卫后，最后执行全局后置守卫
    //全局后置守卫    5
    router.afterEach((to,from)=>{
        // debugger
        console.log('afterEach')
    })

    let vm = new Vue({
        el:'#app',
        router
    })
</script>

路由守卫的执行顺序：全局前置守卫 router.beforeEach((to,from,next) 1------------>//路由独享函数，通过from，to知道他的来源于去 beforeEnter(to,from,next)---------------->//找到相应的路由后，执行相应的模板beforeRouteEnter(to,from,next)---------------------->//找到相应的模板后，执行全局解析守卫 //全局解析守卫 4 router.beforeResolve((to,from,next)--------------------------------------------------------------------->//执行完全局解析守卫后，最后执行全局后置守卫 //全局后置守卫 5 router.afterEach((to,from),其中这里面的每一个守卫都是对应的一个回调函数