目录
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>
