Vue配置路由参数

66 阅读 0 评论 44 点赞

我是靠谱客的博主神勇小兔子，最近开发中收集的这篇文章主要介绍Vue配置路由参数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一嵌套路由的使用

1.1 配置理由的规则

                {
                    path:'message',
                    component:message,
                    children:[{
               
                        path:'detail',
                        component:detail}]
                        
                }

1.2 访问时候的配置

 <router-link  active-class="active" to="/home/message/detail">子组件</router-link>

二路由的query参数

2.1 配置路由规则（同上即可）

2.2.1跳转路由并携带query参数 to的字符串写法

<ul>
        <li v-for="m in meaasgeList" :key="m.id">
         <!-- <router-link  active-class="active" 
:to="`/home/message/detail?id=${m.id}&title=${m.title}`"> {{m.title}}</router-link> -->

</li>
</ul>

2.2.2

<router-link  active-class="active" :to="{
                path:'/home/message/detail',
                query:{
                    id:m.id,
                    title:m.title
                }
            }"> {{m.title}}</router-link>

2.3 路由组件使用传递过来的参数

<ul>
     <li>{{$route.query.id}}</li>
       <li>{{$route.query.title}}</li></ul>

三命名路由

3.1 配置路由

   {
                    path:'message',
                    component:message,
                    children:[{
                        name:'xiangqing',
                        path:'detail',
                        component:detail]
                }

3.2 路由使用

   <!-- 跳转路由并携带query参数  to的对象写法 -->
            <!-- <router-link  active-class="active" :to="{
                name:'xiangqing',
                query:{
                    id:m.id,
                    title:m.title
                }
            }"> {{m.title}}</router-link> -->

四路由的params参数

4.1 配置路由

                {
                    path:'message',
                    component:message,
                    children:[{
                        name:'xiangqing',
                        path:'detail/:id/:title',
                        component:detail}]
                }

4.2 使用路由

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

            <!-- <router-link  active-class="active" :to="`/home/message/detail/${m.id}/${m.title}`"> {{m.title}}</router-link> -->
 
 
           <!-- 跳转路由并携带params参数  to的对象写法 -->
             <!-- 这必须是name  path会报错 -->
            <router-link  active-class="active" :to="{
                name:'xiangqing',  
                params:{
                    id:m.id,
                    title:m.title
                }
            }"> {{m.title}}</router-link>

4.3 路由组件使用传递过来的参数

       <!-- <li>{{$route.params.id}}</li>
       <li>{{$route.params.title}}</li> -->

五路由的props配置

5.1 配置路由这的path一定要唯一，可以是detail/:id 也可以是 detail/:id/:title,但是不能是detail

不唯一的话就只能跳转一次

{
                    path:'message',
                    component:message,
                    children:[{
                        name:'xiangqing',
                        path:'detail/:id',
                        component:detail,
                        //方便路由组件更好的接受参数
                        //props的第一种写法，值为对象 ,所有的key-value都会以props的形式传给detail组件
                        // props:{a:1,b:'hello'}

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

                        //prop的第三种写法 值为函数
                        // props($route){
                        //     return {id:$route.params.id,title:$route.params.title}
                        // }

                    }]
                }

5.2 路由的使用只要能携带params属性就可以

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

            <!-- <router-link  active-class="active" :to="`/home/message/detail/${m.id}/${m.title}`"> {{m.title}}</router-link> -->
 
 
           <!-- 跳转路由并携带params参数  to的对象写法 -->
             <!-- 这必须是name  path会报错 -->
            <router-link  active-class="active" :to="{
                name:'xiangqing',  
                params:{
                    id:m.id,
                    title:m.title
                }
            }"> {{m.title}}</router-link>
           </li>

5.3 路由组件的使用

<template>
  <ul>
      <!-- <li>{{$route.query.id}}</li>
       <li>{{$route.query.title}}</li> -->
       <!-- <li>{{$route.params.id}}</li>
       <li>{{$route.params.title}}</li> -->
       <li>{{id}}</li>
       <li>{{title}}</li>

  </ul>
</template>

<script>
export default {
 name:'detail',
 props:['id','title'],
 mounted(){
     console.log(this.$route)
 }
}
</script>