Vue路由传参

目录

Query传参

query传参类似GET请求传参，在路径后面拼上即可

另一种方式就是将to属性配置成对象

<router-link class="tab-item" active-class="active" :to="{
                path:'/Home',
                query:{
                    type:0,
                    name:'首页'
                }
            }">首页</router-link>

展示的时候需要这样取值

<h3>type：{{$route.query.type}}</h3>
<h3>name：{{$route.query.name}}</h3>

效果如下：

还有一种方式，就是配置props，如下在路由配置文件中做如下配置

然后使用的时候如下：

//需要加入属性
<script>
    export default {
        props:['type','name']
    }
</script>

展示的时候直接使用属性

<template>
    <div>
        <h1>首页</h1>
        <div class="tab">
            <h3>type：{{type}}</h3>
            <h3>name：{{name}}</h3>
            <router-link class="tab-item" active-class="active" to="/Home/Circle">圈子</router-link>
            <router-link class="tab-item" active-class="active" to="/Home/Foucs">关注</router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

Params传参

第一种方式在跳转路径上传递，首先需要在路由配置的地方加入占位

<router-link class="tab-item" active-class="active" :to="`/Home/${0}/${'首页'}`">首页</router-link>

同样另一种方式就是将to属性配置成对象，首先需要给路由加name

然后跳转的时候使用name，同时传入params参数

<router-link class="tab-item" active-class="active" :to="{
                name:'Home',
                params:{
                    type:0,
                    name:'首页'
                }
            }">首页</router-link>

同样params传参也可以使用props，不过params相对简单，如下：
修改路由配置文件，将props的值改为true即可

传值方式如下（当然占位的那种也可以）

<router-link class="tab-item" active-class="active" :to="{
              name:'Home',
              params:{
                  type:0,
                  name:'首页'
              }
          }">首页</router-link>

接收的话与query使用属性时的一样

<template>
    <div>
        <h1>首页</h1>
        <div class="tab">
            <h3>type：{{type}}</h3>
            <h3>name：{{name}}</h3>
            <router-link class="tab-item" active-class="active" to="/Home/Circle">圈子</router-link>
            <router-link class="tab-item" active-class="active" to="/Home/Foucs">关注</router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        props:['type','name']
    }
</script>