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

迈不过友情╰ 2022-04-08 13:18 899阅读 0赞

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

1.  占位符: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.id;  //注意是$route

根据[官方文档][Link 1]的说明，我觉得:id 的作用主要是利用props将组件和路由解耦，我通俗的说一下：一个组件可能是一个路由指向它，也有可能只是作为普通的子组件（不是路由），如果使用该组件都要向其传递name参数，[如果用this.$route.params.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: {
          ..........
       }
    }

此外，相同路由跳转只是后面跟的数据不一样，也是用这种方式传参（动态路由）

1.  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

[Link 1]: https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5%BC%8F
[this._route.params.name]: http://xn--this-f96g453evvv.$route.params.name