亲宝软件园·资讯

展开

vue路由传参及获取参数

吃喽喽 人气:0

一、声明式传参

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 },
 });

总结

加载全部内容

相关教程
猜你喜欢
用户评论