Vue学习笔记-路由的基本使用

版本问题

vue2 要下载vue-router3
vue3 要下载vue-router4

使用步骤

1. 安装vue-router，命令：npm i vue-router@版本号

2. 在main.js中导入vue-router模块，并且使用vue-router插件

   ......
   //引入vue-router
   import VueRouter from 'vue-router'
   ......
   //应用插件
   Vue.use(VueRouter)
   

3. 在src路径下创建router文件夹，并创建index.js文件，该文件用于配置路由规则

   //该文件用于创建整个文件的路由器
   import VueRouter from "vue-router";
   import AboutVue from "@/components/AboutVue";
   import HomeVue from "@/components/HomeVue";
   
   //创建一个路由器
   const router = new VueRouter({
       routes:[
           {
               path:'/about',/*路径*/
               component:AboutVue /*组件*/
           },
           {
               path:'/home',
               component:HomeVue
           }
       ],
   })
   //导出
   export default router
   

4. 实现组件切换，在需要路由切换的组件中编写如下内容(active-class类用于动态地为选中的标签添加样式)

   <router-link active-class="active" to="/about">About</router-link>
   <router-link active-class="active" to="/home">Home</router-link>
   

5. 指定展示切换的组件的位置

   <!--指定组件的呈现位置-->
   <router-view></router-view>
   

几个注意点

1. 路由组件（需要时常切换的组件）一般放在pages文件夹，一般组件（比较固定不动的组件）通常放在components文件夹
2. 切换组件时，不需要的组件会被销毁，等再切换显示时再次挂载，当组件被销毁时，建议将绑定的资源释放（例如组件中绑定的自定义事件）
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息
4. 每个组件共享一个$router属性，因为整个应用只有一个router管理路由规则

多级路由（嵌套路由）

1. 配置(需要注意的是，多级路由下的path路径配置，不需要写斜杠)

    routes:[
           {
               path:'/about',
               component:AboutVue
           },
           {
               path:'/home',
               component:HomeVue,
               children:[
                   {
                       path:'news',/*二级路由不用写斜杠*/
                       component:NewsVue
                   },
                   {
                       path:'message',
                       component:MessageVue
                   }
               ],
           }
       ],
   

2. 跳转：要写完整路径

   <router-link active-class="active" to="/home/news">News</router-link>
   <router-link active-class="active" to="/home/message">Message</router-link>
   

路由传递参数-query

1. 父组件A向子组件B传递参数
   父组件A中核心代码
   【注】：`模板字符串`中可以嵌入 ${js代码}

 <ul>
      <li v-for="message in messageList" :key="message.id">
        <!--跳转路由并携带query参数，to的字符串写法-->
  		<router-link :to="`/home/message/detail?id=${message.id}&title=${message.title}`">{{ message.title }}</router-link>&nbsp;&nbsp;
        <!--跳转路由并携带query参数，to的对象写法-->
        <router-link :to="{
          path:'/home/message/detail',
          query:{
            id:message.id,
            title:message.title
          }
        }">
          {{ message.title }}
        </router-link>
      </li>
</ul>

2.子组件B中接收数据
子组件中存在$route对象，该对象可用于路由参数接收

<ul>
    <li>消息编号:{{ $route.query.id }}</li>
    <li>消息标题:{{ $route.query.title }}</li>
</ul>

路由参数传递-params

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

   {
               path:'/home',
               component:HomeVue,
               children:[
                   {
                       path:'news',/*二级路由不用写斜杠*/
                       component:NewsVue
                   },
                   {
                       path:'message',
                       component:MessageVue,
                       children:[
                           {
                               name:'detailName',
                               /*
                               	当占位符后面加？时，表面当前param可传可不传
                               	path:'detail/:id?/:title?'
                               */
                               path:'detail/:id/:title',/*使用占位符声明接收params参数*/
                               component:DetailVue
                           },
                       ]
                   }
               ],
           }
   

2. 传递参数

   <ul>
         <li v-for="message in messageList" :key="message.id">
           <!--跳转路由并携带params参数，to的字符串写法-->
    		<router-link :to="`/home/message/detail/${message.id}/${message.title}`">{{ message.title }}</router-link>&nbsp;&nbsp;
           <!--
             跳转路由并携带params参数，to的对象写法
             该方法to对象中不能写path属性，必须写name属性
           -->
           <router-link :to="{
             name:'detailName',
             params:{
               id:message.id,
               title:message.title
             }
           }">
             {{ message.title }}
           </router-link>
         </li>
   </ul>
   

   【特别注意】:路由携带params参数时，如果采用to的对象写法，则不能使用path配置项，而必须使用name配置项

3. 接收参数

   <li>消息编号:{{ $route.params.id }}</li>
   <li>消息标题:{{ $route.params.title }}</li>
   

路由的props配置

作用：让路由组件更方便地接收参数（减少类似$route.xxx.yyy的使用次数）

1. 路由配置

   {
     path:'message',
     component:MessageVue,
     children:[
        {
           name:'detailName',
           path:'detail',
           component:DetailVue,
           //props的第一种写法，值为对象,该对象中的所有key-value都会以props的形式传给component属性中配置的组件
           //props:{a:1,b:'hello'},
           //props的第二种写法，值为布尔值，如果为true,就会把路由组件收到的所有params参数，以props的形式传给该路由绑定的组件
           //props:true,
           //props的第三种写法，值为函数
           //props:function()(){}
           props($route){
              return {id:$route.query.id, title:$route.query.title}
           }
        },
           ]
   }
   

2. 路由组件数据接收示例

   <template>
     <ul>
   <!--    <li>消息编号:{{ $route.params.id }}</li>
       <li>消息标题:{{ $route.params.title }}</li>-->
       <li> 消息编号:{{id}} </li>
       <li> 消息标题:{{title}} </li>
     </ul>
   </template>
   
   <script>
   export default {
     name: "DetailVue",
     props:['id','title']
   }
   </script>