Vue 嵌套路由、路由守卫

嵌套路由

嵌套路由：一个路由配置中嵌套其他的路由配置。

嵌套路由挺常用的，比如导航栏有首页、文章、想法、留言4个模块，我们以嵌套路由的形式集成这些模块，在导航栏中点击对应的条目，就会路由到对应的页面（下方显示对应的页面），和html的<iframe>效果差不多。

demo 嵌套路由

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入vue.js -->
        <script src="js/vue.js"></script> 
        <!-- 引入路由插件 -->
        <script src="js/vue-router.js"></script>
    </head>
    <body>
        
    <div id="app"></div>
    
    <script>
        // 导航
        var Nav={
            template:`
                <div>
                    <router-link :to="{name:'nav.index'}">首页</router-link>
                    <router-link :to="{name:'nav.article'}">文章</router-link>
                    <router-link :to="{name:'nav.idea'}">想法</router-link>
                    <router-link :to="{name:'nav.message'}">留言</router-link>
                    <router-view></router-view>  <!-- 留坑，点击上面4个路由链接，会在此处显示对应的页面 -->
                </div>
            `,
        }
        
        // 首页
        var Index={
            template:`
                <div>
                    <p>这是首页部分</p>
                </div>
            `,
        }
        
        // 文章
        var Article={
            template:`
                <div>
                    <p>这是文章部分</p>
                </div>
            `,
        }
        
        // 想法
        var Idea={
            template:`
                <div>
                    <p>这是想法部分</p>
                </div>
            `,
        }
            
        // 留言
        var Message={
            template:`
                <div>
                    <p>这是留言部分</p>
                </div>
            `,
        }
            
            
        // 安装路由插件
        Vue.use(VueRouter);
            
        // 创建路由对象
        var router=new VueRouter({
            // 配置路由规则
            routes:[ 
                {path:'/',name:'nav',component:Nav,children:[   //path直接映射到根路径（当前html页面下）下，children配置要嵌套的路由,对象数组形式
                    {path:'/index',name:'nav.index',component:Index},  //嵌套的路由的name里一般都要带上外部的路由容器，一看就知道关系
                    {path:'/article',name:'nav.article',component:Article},
                    {path:'/idea',name:'nav.idea',component:Idea},
                    {path:'/message',name:'nav.message',component:Message},
                    {path:'',name:'nav.index',component:Index},  //要点击nav中对应的链接才会路由到指定页面，我们给它配置一个默认的路由页面，path:''
                ]},
            ]
        });
            
        new Vue({
            el:'#app',
            router,  //使用路由
            template:`
                <div>
                    <router-view></router-view>  <!-- 留给nav的坑位 -->
                </div>
            `,
        })
    
    </script>        
        
    </body>
</html>

嵌套的路由的path可以使用相对路径、也可以使用绝对路径

    {path:'/nav',name:'nav',component:Nav,children:[   
           {path:'/index',name:'nav.index',component:Index}  //绝对路径
    ]}

/表示根路径（当前html页面）。index的访问路径是.....html#/index

    {path:'/nav',name:'nav',component:Nav,children:[   
           {path:'index',name:'nav.index',component:Index}  //相对路径，相对于外部路由
    ]}

index的访问路径是....html#/nav/index

路由守卫

一个页面路由到另一个页面，路由到目标页面之前可以做一些处理，比如登录检测、权限检查，不满足就不路由到目标页面，给出提示信息。

demo 路由守卫

    // 安装路由插件
    Vue.use(VueRouter);
        
    // 创建路由对象
    var router=new VueRouter({
        // 配置路由规则
        routes:[ 
            //.....
        ]
    });
        
    new Vue({
        el:'#app',
        template:`
            <div>
                <router-view></router-view>  <!-- 留坑 -->
            </div>
        `,
        router,
        data(){
            return{
                //......
            }
        },
        mounted(){
            router.beforeEach( (to,from)=>{   //路由守卫。使用ES6的箭头函数做一些前处理。2个参数分别封装了目标页面、上一个页面的信息
                //......
            });
        },
        
    })

路由守卫要写在html页面的new Vue()中，一般是写在mouted(){ }中。

上一个页面要传数据给目标页面，比如username、uid、loginstate、role什么的，可以在data中用一些变量保存这些数据，路由守卫根据这些数据进行登录检测、权限检测。

执行到mouted()时，数据已经挂载，可以获取到数据，路由守卫可以拿到数据进行检测啦。

beforeEach，顾名思义，每次路由到目标页面时，都会使用路由守卫进行检测。

现在好多应用都是mvc模式，controller那里拦截器、过滤器什么的早就对请求进行了过滤，登录检测、权限检查已经做过了，在视图这里没必要再使用路由守卫来过滤。

路由守卫用得很少，了解即可。

来源：https://www.cnblogs.com/chy18883701161/p/12628518.html

标签

vue