vue路由query和params的几种传参方式

在项目中需要路由传参，查看了官方文档以及参考了网上其他资料，现总结如下：
一/ params传参

占位符:id

//声明式
<router-link :to=`/home/${name}`>  
//编程式
skipMethod (name) {
    this.$router.push(`/home/${name}`);
    //或者
    this.$router.push({
       path: `/home/${name}`
    })
}

路由配置：

{
   path; '/home/:id',
   name: 'home',
   component: Home
}

子组件中获取：

this.$route.params.name;  //注意是$route

根据官方文档的说明，我觉得:id 的作用主要是利用props将组件和路由解耦，我通俗的说一下：一个组件可能是一个路由指向它，也有可能只是作为普通的子组件（不是路由），如果使用该组件都要向其传递name参数，如果用this.$route.params.name;接收参数，那么作为普通的子组件怎么接收参数，所以最好不管怎么用该组件，该组件都要用props接收参数，下面主要说路由如何用props

路由配置：

routes: [
    { path: '/', component: Hello }, // No props, no nothing
    { path: '/hello/:name', component: Hello, props: true }, // Pass route.params to props
    { path: '/static', component: Hello, props: { name: 'world' }}, // static values
    { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn }, // custom logic for mapping between route and props
  ]

父组件：

<ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/hello/you">/hello/you</router-link></li>
        <li><router-link to="/static">/static</router-link></li>
        <li><router-link to="/dynamic/1">/dynamic/1</router-link></li>
        <li><router-link to="/attrs">/attrs</router-link></li>
      </ul>

子组件：

export default {
   props: {
      ..........
   }
}

params对象

//声明式
<router-link :to="{name: 'home', params:{name: name}}">  
//编程式
skipMethod (name) {
    this.$router.push({
       name: 'home',
       params: {
          name: name
       }
    })
}

路由配置：

{
   path; '/home',
   name: 'home',
   component: Home
}

接收：

this.$route.params.name;

注意：params只能用name来引入路由

二/ query传参

//声明式
<router-link :to="'/home?name=' + name">
//或者
<router-link :to="{path: '/home', query: {name: name}}">
//编程式
skipMethod (name) {
    this.$router.push({
       path: '/home',
       query: {
          name: name
       }
    })
}

路由配置：

{
   path; '/home',
   name: 'home',
   component: Home
}

子组件接收：

this.$route.query.name

vue路由query和params的几种传参方式

猜你喜欢