vue路由传参方式的方式总结及获取参数详解
作者：吃喽喽
vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于vue路由传参方式的方式总结及获取参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
一、声明式传参
1.params传参(显示参数)
在url中会显示出传参的值，刷新页面不会失去拿到的参数，使用该方式传值的时候，需要子路由提前配置好参数：
//路由参数配置
const router = new VueRouter({
routes: [{
path: '/about/:id',
component: User
}]
})
//声明式导航使用
<router-link to="/about/12">跳转</router-link>//路由参数配置
const router = new VueRouter({
routes: [{
name: 'user1',
path: '/about/:id',
component: User
}]
})
//声明式导航使用
<router-link :to="{ name: 'user1', params: { id: 123 } }">跳转</router-link>2.params传参(不显示参数)
在url中不会显示出传参的值，但刷新页面会失去拿到的参数，使用该方式 传值 的时候，需要子路由提前配置好name参数:
//路由参数配置
const router = new VueRouter({
routes: [{
name: 'user1',
path: '/about',
component: User
}]
})
//声明式导航使用
<router-link :to="{ name: 'user1', params: { id: 123 } }">跳转</router-link>3.query 传参
query 传过去的参数会拼接在地址栏中（?name=xx），刷新页面数据不会丢失，使用path和name都可以：
//路由参数配置
const router = new VueRouter({
routes: [{
name: 'user1',
path: '/about',
component: User
}]
})
//使用name
<router-link :to="{ name: 'user1', query: { id: 123 }}"></router-link>
//使用path
<router-link :to="{ path: '/about', query: { id: 123 } }"></router-link>二、编程式传参
1.params传参(显示参数)
//路由配置
{
path: '/child/:id',
component: Child
}
//编程式使用
this.$router.push({
path:'/child/${id}',
})//路由配置
{
path: '/child:id',
component: Child,
name:Child
}
//编程式使用
this.$router.push({
name:'Child',
params:{
id:123
}
})2.params传参(不显示参数)
//路由配置
{
path: '/child',
component: Child,
name:Child
}
//编程式使用
this.$router.push({
name:'Child',
params:{
id:123
}
})3.query 传参
//路由配置
{
path: '/child',
component: Child,
name:Child
}
//编程式使用
//name方式
this.$router.push({
name:'Child',
query:{
id:1
}
})
//path方式
this.$router.push({
path:'/child',
query:{
id:1
}
})
三、获取参数
1、params的获取方式
this.$route.params.xxx
2、query的获取方式
this.$route.query.xxx
四、需要注意的点
1、如果使用params传参,且参数是以对象的形式，跳转路径只能使用name形式而不能用path.
2、如果想要params参数想传参也可以不传参需要在占位符后面加?。
//路由参数配置
const router = new VueRouter({
routes: [{
path: '/search/:keyword?',
name: 'search',
component: () => import('@/pages/Search'),
meta: { show: true }
}]
})
//编程式传参
this.$router.push({
name: "search",
params: {},
query: { keyword: this.keyword },
});3、解决params传值为空字符串路径会出现问题：
this.$router.push({
name: "search",
params: { keyword: "" || undefined },
query: { keyword: this.keyword },
});总结
到此这篇关于vue路由传参方式的方式总结及获取参数的文章就介绍到这了,更多相关vue路由传参及获取参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！