vue2 两种页面跳转传值的方式-query&params

419 阅读1分钟

是的,Vue 2中有两种常用的页面跳转传值方式:通过query参数和通过params参数。

  1. 通过query参数传值:
    在路由跳转时,可以使用router-link<a>标签加上to属性来指定目标路径,并在URL中添加query参数。例如:

    <!-- router-link -->
    <router-link :to="{ path: '/target', query: { id: 1, name: 'example' }}"></router-link>
    
    <!-- <a> 标签 -->
    <a :href="'/target?id=1&name=example'"></a>
    

    然后在目标页面中,可以使用$route.query来获取传递的参数。例如:

    // 目标页面中
    export default {
      mounted() {
        console.log(this.$route.query.id); // 输出 1
        console.log(this.$route.query.name); // 输出 example
      }
    }
    
  2. 通过params参数传值:
    在路由跳转时,可以使用router-link<a>标签加上to属性来指定目标路径,并在路由定义的路径中添加动态参数。例如:

    <!-- router-link -->
    <router-link :to="{ path: '/target/' + 1 + '/example' }"></router-link>
    
    <!-- <a> 标签 -->
    <a :href="'/target/1/example'"></a>
    

    然后在路由定义中,需要将该参数声明为动态参数。例如:

    // 路由定义中
    {
      path: '/target/:id/:name',
      component: TargetComponent
    }
    

    最后,在目标页面中,可以使用$route.params来获取传递的参数。例如:

    // 目标页面中
    export default {
      mounted() {
        console.log(this.$route.params.id); // 输出 1
        console.log(this.$route.params.name); // 输出 example
      }
    }
    

总的来说,通过query参数传值更适用于传递一些可选参数,而通过params参数传值更适用于传递必要的参数。根据实际需求选择合适的传值方式可以更好地进行页面间的数据传递。