vue-router（路由）详细

• 通过切换，隐藏了的路由组件，默认是被销毁掉的，需要的时候在挂载

• 每个组件都有自己的$route属性，里面存储着自己的路由信息

• 整个应用只有router，可以通过组件的**$router**属性获取到

4.多级路由

1.配置路由规则，使用children配置项

 routes:[

        {

           path:'/about',

           component:About

        },

        {

            path:'/home',

            component:Home,

            // 二级路由

            children:[

                {

                //这里不用加斜

                path:'news',

                component:News,

                },

                {

                //这里不用加斜

                path:'message',

                component:Message,

                }

            ]

        }

    ]

2.跳转(要写完整路径)：

也就是带上父级路径

<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>

5.路由的query参数

1.传递参数

 <li v-for="m in messageList" :key="m.id">

            <!-- 跳转路由并携带query参数 to的字符串写法 -->

            <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->



            <!-- 跳转路由并携带query参数 to的对象写法 -->

            <router-link :to="{

                //你要去到哪个组件

                path:'/home/message/detail' ,

                query:{

                    id:m.id,

                    title:m.title

                }

            }">

            {{m.title}}

            </router-link>

            </li>     

2.接收参数

$route.query.id

$route.query.title

6.给路由命名

当多级路由时给上name名可以简化跳转，一级路由给不给name没有多大影响

 routes:[

        {

            //给路由命名 跳转时直接用name:命名 不用path 

            name:'nameabout',

            path:'/about',

            component:About

        },

        {

            path:'/home',

            component:Home,

            // 二级路由

            children:[

                {

                //这里不用加斜

                path:'news',

                component:News,

                },

                {

                //这里不用加斜

                path:'message',

                component:Message,

                children:[

                    {

                        //多级路由给name 可以简化跳转

                        name:'namedetail',

                        path:'detail',

                        component:Detail

                    }

                ]

                }



            ]

        }

]

2.简化跳转

<router-link :to="{

                //你要去到哪个组件 

                //直接使用name 不用path路径

                name:'namedetail' ,

                query:{

                    id:m.id,

                    title:m.title

                }

            }">

            {{m.title}}

            </router-link>

6.路由的params参数

1.配置路由,声明接收params参数

routes:[

        {

            name:'nameabout',

            path:'/about',

            component:About

        },

        {

            path:'/home',

            component:Home,

            // 二级路由

            children:[

                {

                //这里不用加斜

                path:'news',

                component:News,

                },

                {

                //这里不用加斜

                path:'message',

                component:Message,

                children:[

                    {

                        name:'namedetail',

                        path:'detail/:id/:title', //使用占位符声明接收params参数

                        component:Detail

                    }

                ]

                }



            ]

        }

    ]

2.传递参数

 <!-- 跳转路由并携带params参数 to的字符串写法 -->

            <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; 



            <!-- 跳转路由并携带params参数 to的对象写法 -->

            <router-link :to="{

                //你要去到哪个组件

                name:'namedetail' ,

                params:{

                    id:m.id,

                    title:m.title

                }

            }">

            {{m.title}}

            </router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3.接收参数

$route.params.id

$route.params.title

7.路由的props配置

作用：让路由组件更方便的收到参数

    {

        name:'namedetail',

        path:'detail/:id/:title', //使用占位符声明接收params参数

        component:Detail,

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

         props:{

             a:1,

             b:'helloworld'

         }



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

          props:true



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

         props($route){

             return {

                 id:$route.query.id,

                 title:$route.query.title

             }

         }



     }

6.缓存路由组件

1.作用：让不展示的路由保持挂载，不被销毁

2.具体编码：

 <keep-alive include="News">

      <router-view></router-view>

 </keep-alive>

7.两个新的生命周期钩子

1.作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

2.具体名字：

1.activated 路由组件激活时触发

2.deactivated 路由组件失活时触发

7.路由守卫

全局前置路由守卫

// 前置路由守卫

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

    // console.log(to)

    // console.log(from)

    next()

        if(to.meta.isAuth){

         if(localStorage.getItem('school')=== 'aiguigu'){

            next()

        }else{

           alert("请登录")

        }

         

    }

})

全局后置路由守卫

// 后置路由守卫

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

    console.log(to,from)

})

独享路由守卫

      {

       //这里不用加斜

       name:'xinwen',

       path:'news',

       component:News,

       meta:{isAuth:true},

       // 独享路由守卫

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

           if(to.meta.isAuth){

               if(localStorage.getItem('school')=== 'aiguigu'){

                  next()

              }else{

                 alert("请登录")

              }

               

          }

       }

   },

8.组件内守卫

// 组件路由

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

    beforeRouteEnter(to,from,next){

        console.log('我进来了',to)

    },

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

    beforeRouteLeave(to,from,next){



    }

9.路由器的两种工作模式