Vue(基础六)_嵌套路由（续）

一、前言

1、路由嵌套里面的公共路由

2、keep-alive路由缓存

3、导航守卫

二、主要内容

1、路由嵌套里面的公共路由：

（1）如下图所示是掘金网的首页，上面是父组件，里面是子组件，在切换里面的导航的时候发现里面的结构并没有变化，只是数据发生了变化，为了避免切换的时候反复操作DOM,这时候将里面的内容部分形成一个公共的组件，这个时候哦需要用watch来监听路由的变化，然后根据不同的路由来做出响应

（2）实现路由复用的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        
    </div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>



    <script type="text/javascript">

             var Timeline = {
                 template:`<div id='timeline'>
                 

                 <router-link :to  ="{name:'comDesc',params:{id:'frontend'}}">前端</router-link>
                 <router-link :to  ="{name:'comDesc',params:{id:'backend'}}">后端</router-link>

                 <router-view></router-view>



                 </div>`
             }

             var Pins={
                 template:'<div>我是沸点</div>'
             }
            //这是子组件里面公共的部分,当点击前端时，创建出了这个公共组件，当点击后端时没有创建
             var ComDesc = {
                 data(){
                     return {
                         msg:''
                     }
                 },
                 template:'<div>我是{{msg}}</div>',
                 created(){
                     
                     console.log(1)

                 },
                 watch:{//这里检查到了路由是从前端到后端
                     '$route'(to, from){
                         console.log(to);
                         console.log(from)
                         this.msg = to.params.id
                     }
                 }
             }

             var router = new VueRouter({
                 routes:[
                 {
                     path:'/timeline',
                     component:Timeline,
                     children:[
                     {
                         name:'comDesc',
                         path:'/tiemline/:id',
                         component:ComDesc
                     }


                     ]
                 },
                 {
                     path:'/pins',
                     component:Pins
                 }

                 ]
             })
    


              var App = {
                  template:`
                  <div>
                  <router-link to='/timeline'>首页</router-link>
                  <router-link to='/pins'>沸点</router-link>

                  <router-view></router-view>

                  </div>


                  `
              }
              new Vue({
                  el:'#app',
                  router:router,//6.交给这个实例化对象去管理

                  template:`<App />`,
                  components:{
                      App
                  }
                  
              })
    </script>
    
</body>
</html>

实现路由复用.html

（3）如果想要根据你上面的路由变化，让不同的路由做出响应，这时候要用watch()来监听，当监听到to, form发生变化的时候，就可以根据不同的路径，发送响应，拿到不同的数据

2、keep-alive组件缓存的使用

用法：当我们反复切换某两个DOM对象的时候，就一直在创建销毁创建销毁，这样对页面中dom的消耗是很大的，为了避免这种情况，用keep-alive来让组件激活与失活。

下面演示案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        
    </div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>



    <script type="text/javascript">

             var Timeline = {//反复点击，说明这个组件一直在创建销毁创建销毁，这样对页面的消耗会很大
                 template:`<div id='timeline'>
                 
                我是首页
                 </div>`,
                 created(){
                     console.log('首页组件创建了')
                 },
                 mounted(){
                     console.log('首页组件DOM加载了')
                 },
                 destroyed(){
                     console.log('首页组件销毁了')
                 }
             }

             var Pins={
                 //点过去，点回来，组件会重新创建，肯定会变回原来的状态
                 template:`<div><h3 @click='clickHandler'>我是沸点</h3></div>`,

                 methods:{
                     clickHandler(e){
                         e.target.style.color = 'red'

                     }

                 },
                 created(){
                     console.log('沸点组件创建了')
                 },
                 mounted(){
                     console.log('沸点组件DOM加载了')
                 },
                 destroyed(){
                     console.log('沸点组件销毁了')
                 }
             }
            //这是子组件里面公共的部分,当点击前端时，创建出了这个公共组件，当点击后端时没有创建
            

             var router = new VueRouter({
                 routes:[
                 {
                     path:'/timeline',
                     component:Timeline,
                     

                     
                 },
                 {
                     path:'/pins',
                     component:Pins
                 }

                 ]
             })
    


              var App = {
                  template:`
                  <div>
                  <router-link to='/timeline'>首页</router-link>
                  <router-link to='/pins'>沸点</router-link>
                  
                <keep-alive>
                <router-view></router-view>

                </keep-alive>
                  

                  </div>


                  `
              }
              new Vue({
                  el:'#app',
                  router:router,//6.交给这个实例化对象去管理

                  template:`<App />`,
                  components:{
                      App
                  }
                  
              })
    </script>
    
</body>
</html>

keep-alive的使用.html

3、导航守卫

用法：有些网页在访问某些地方的时候需要用到权限，比如当用户访问首页的时候可以访问首页里面的内容，当访问其他的时候，会判断用户是否已经登录了，如果没有登录，显示登录组件，已经登录则可以直接访问

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <router-link to='/home'>首页</router-link>
        <router-link to='/blog'>我的博客</router-link>
        <router-link to = '/login'>登录</router-link>
        <router-view></router-view>
    </div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>



    <script type="text/javascript">
          Vue.use(VueRouter);

        var Home = {
            template:`

                  <div>
                      我是首页
                  </div>
            `
        };
        var Blog = {
            template:`

                  <div>
                      我是博客
                  </div>
            `
        };
        var Login = {
            data(){
                return {
                    name:'',
                    pwd:''
                }
            },
            template:`

                  <div>
                      <input type="text" v-model ='name'/>
                      <input type="text"  v-mode  = 'pwd'/>
                      <input type="button"  value ='登录' @click = 'login'/>
                  </div>
            `,
            methods:{
                login(){
                    localStorage.setItem('user', {name:this.name,pwd:this.pwd});


                    // 编程式导航
                    this.$router.push({name:'blog'});

                }
            }
        };

        var router = new VueRouter({
            routes:[
                {
                    path:'/',
                    redirect:'/home'
                },
                {
                    path:'/home',
                    component:Home
                },
                {
                    name:'blog',
                    path:'/blog',
                    component:Blog,
                    // 给未来路由 做权限控制 全局路由守卫 来做参照条件
                    meta:{
                        // 表明用户访问该组件是需要登录
                        auth:true
                    }
                },
                {
                    path:'/login',
                    component:Login
                }

            ]
        });

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


            if (to.meta.auth) { //用户点击了博客链接 该用户未登录 需要登录判断 准备跳转登录页面

                if(localStorage.getItem('user')){
                    // alert(1);
                    // 不为空 放行
                    next();
                }else{
                    // alert(2);
                    // 用户需要登录
                    next({
                        path:'/login'
                    });
                }


            }else{
                // 直接放行
                next();//如果不调用next 就会卡住
            }
            

         
        });
        
        new Vue({
            el:'#app',
            router,
            methods:{
                clear(){
                    localStorage.removeItem('user');
                    this.$router.push('/login');
                }
            }
        });
    </script>
    
</body>
</html>

meta权限设置（导航守卫）.html

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

三、总结

Vue(基础六)_嵌套路由（续）

猜你喜欢