Vue路由传参两种方式

在vue-router路由中,传参方式一般分两种:

一种是利用$route.query对象的Get方式传参,与http的get方式一样,会将参数暴露到地址栏,使用方式如下:

路由请求发起(编程式导航):

this.$router.push({path:'/selectById', query: {id: this.id}});

参数接收:

{{this.$route.query.searchBody}}

另一种是利用$route.params对象的Post方式传参,该方式具有一定限制,必须通过路径传参方式。

路由配置(根组件的路由配置js,若是vue-cli构建则为src/router/index.js):

import Vue from 'vue'
import Router from 'vue-router'
import User from '@/components/User'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: 'index'
    },
    {
      path: '/selectById/:id',
      component: User
    }
  ]
})

路由请求发起:

this.$router.push({path:'/selectById', params: {id: this.id}});

参数接收:

{{this.$route.params.searchBody}}

以上是常用的两种router传参方式,特别需要注意如果params不通过路径地址传参的话是取不到值的。

你可能感兴趣的:(Vue路由传参两种方式)