路由命名

路由命名

路由传参：query

    <script>
        let Foo1 = {
            template:`<div>
                    <button @click="toFoo2">go foo2</button>
                    <router-link :to="{path:'/foo2',query:{id:123}}">go foo2</router-link>
                    这是foo1的内容
                </div>`,
            methods:{
                toFoo2(){
                    // this.$router.push("/foo2");
                    this.$router.push({path:"/foo2",query:{id:"123456"}});
                }
            },
            created(){
                console.log(this.$route.query);
            }
        }
        let Foo2 = {
            template:`<div>
                 <button @click="toFoo1">go foo1</button>
                    这是foo2的内容
                    </p></div>`,
            methods:{
                toFoo1(){
                    //要是给路由传递参数，就要带上path，并且传参要使用query，获取参数也是使用query
                    this.$router.push({path:"/foo1",query:{name:"xumo",id:123}})
                }
            }
        }
        let router = new VueRouter({
            routes:[
               {path:"/foo1/:name",component:Foo1},
               {path:"/foo2",component:Foo2}
            ]
        });
        let vm = new Vue({
            el:"#app",
            router
        });
    </script>
</body>
</html>

动态路由传参：params

    <script>
        //定义路由组件
        let Foo1 = {
            template:`<div>
                    <button @click="toFoo2">go foo2</button>
                    <router-link :to="{path:'/foo2',query:{id:123}}">go foo2</router-link>
                    这是foo1的内容
                </div>`,
            methods:{
                toFoo2(){
                    // this.$router.push("/foo2");
                    this.$router.push({path:"/foo2",query:{id:"123456"}});
                }
            },
            created(){
                console.log(this.$route.query);
                console.log(this.$route.params);
            }
        }
        let Foo2 = {
            template:`<div>
                 <button @click="toFoo1">go foo1</button>
                    这是foo2的内容
                    </p></div>`,
            methods:{
                toFoo1(){
                    //动态传参路由,获取参数使用params来获取，而且还必须在路由实例中的路由后面加上name
                    const name = "123"
                    this.$router.push({path:`foo1/${name}`});
                }
            }
        }
        let router = new VueRouter({
            routes:[
               {name:"foo1",path:"/foo1/:name",component:Foo1},
               {path:"/foo2",component:Foo2}
            ]
        });
        let vm = new Vue({
            el:"#app",
            router
        });
    </script>
</body>
</html>

### 有些时候使用路由命名来标识一个路由会比使用path更加的方便，所有定义路由的时候可以添加一个name属性，而传参则可以用params或者query都是可以的，获取参数也是一样

    <script>
        let Foo2 = {
            template:`<div>
                 <button @click="toFoo1">go foo1</button>
                    这是foo2的内容
                    </p></div>`,
            methods:{
                toFoo1(){
                    //这里使用name属性，则路由实例中也需要用到name属性，否则拿不到，还有如果传参是用params传参的，获取参数则也是应用parmas
                    this.$router.push({name:"foo1",path:"/foo1",params:{userName:"xumo"}});
                }
            }
        }
        let router = new VueRouter({
            routes:[
               {name:"foo1",path:"/foo1/:name",component:Foo1},
            ]
        });
        let vm = new Vue({
            el:"#app",
            router
        });
    </script>
</body>
</html>

用router-link跳转和用编程式导航都是可以的

    <script>
        //定义路由组件
        let Foo1 = {
            //<router-link :to="{path:'/foo2',query:{id:123}}">go foo2</router-link>这个也是可以的，不过必须在to前面加上:进行绑定
            template:`<div>
                    <button @click="toFoo2">go foo2</button>
                    <router-link :to="{path:'/foo2',query:{id:123}}">go foo2</router-link>
                    这是foo1的内容
                </div>`,
            methods:{
                toFoo2(){
                    //跟用router-link一样
                    this.$router.push({path:"/foo2",query:{id:"123456"}});
                }
            }
        }
    </script>
</body>
</html>

路由的重命名

 let router = new VueRouter({
            routes:[
               {name:"foo1",path:"/foo1/:name",component:Foo1},
               {path:"/foo2",component:Foo2,alias:"/xixi"}//使用xixi也是可以访问foo2的
            ]
        });

路由的守卫导航

1. 全局守卫：在router.js中，对router对象进行守卫设置beforeEach函数，router内所有的路径出入都要被守卫盘问

    router.beforeEach((to,from,next)=>{
               next();//必须使用next，不然无法访问
           })
   

2. 路由独享守卫：在某个路由中设置beforeEnter函数，凡是要进入该路由的都会被守卫盘问

         // 创建router实例，然后传到路由配置
           let router = new VueRouter({
               routes:[
                  {name:"foo1",path:"/foo1/:name",component:Foo1,beforeEnter(to,from,next){
                       next()//不使用next，则无法访问foo1
                  }},
                  {path:"/foo2",component:Foo2,alias:"/xixi"}
               ]
           });
   

3. 组件内的守卫，跟方法和data还有钩子函数是同级的

   • beforeRouteEnter(to,from,next)进入前的

     • //beforeRouteEnter不能访问this，因为守卫在导航确认前被调用，因此实例并没有创建，可以通过回调给next访问组件实例
                   beforeRouteEnter(to,from,next){
                       // next(vm=>{
                       //     console.log(vm);
                       // });
                       next();
                   },
       

   • beforeRouteUpdate(to,from,next)修改执行

      beforeRouteUpdate(to,from,next){
                     this.name = to.params.nama
                     console.log(to);
                     next();
                 },
     

   • beforeRouteLeave(to,from,next)退出后执行

     beforeRouteLeave(to,from,next){
                     const asswat = window.confirm("你确定要离开我吗？");
                     next();
                     if(asswat){
                         next();
                     }else{
                         next(false);
                     }
                 }