vue-router（路由）详细

key为路径，value可能是 function 或 component

路由分类：

后端路由

前端路由

2.路由的基本适使用

1.安装vue-router,命令 ： npm i vue-router

2.应用插件：Vue.use(VueRouter)

3.编写router配置项

  <router-link class="list-group-item" active-class="active" to="/about">About</router-link>

5.指定展示位置

 <router-view></router-view>  

3.几个注意点

• 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹

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

• 每个组件都有自己的$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

             }

         }



     }

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-yL2JQUEG-1715659057680)]

[外链图片转存中…(img-7WEyP5gg-1715659057681)]

[外链图片转存中…(img-R8I3XxR1-1715659057681)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！