vue-router传递参数的几种方式

params方式

路由定义

    {
        path: "/user",
        name: 'user',//注意一定要命名该路由，即编写name字段
        component: user,
    },

html部分

声明式导航

    <router-link :to="{ name: 'user', params: { id: '123' } }"
      >params传参</router-link>

编程式导航

	router.push({ name: 'user', params: { id: '123' }})

参数接收

	this.$route.params.id

注：
1.定义路由时，一定要命名路由也就是添加name字段，并且导航时也需要提供路由的name，如果提供了 path，params 会被忽略。

    <router-link :to="{ path: 'user', params: { id: '123' } }"
      >User(params传参不生效)</router-link>

避免上述写法。
2.刷新页面时传递的参数会丢失，因此实际项目中不推荐用此方法传递参数

query方式（url查询参数）

路由定义

    {
        path: "/register",
        component: register,
    },

html部分

声明式导航

    <router-link
      :to="{
        path: 'register',
        query: { plan: 'private' },
      }">query传参</router-link>

编程式导航

	router.push({ path: 'register', query: { plan: 'private' }})

参数接收

	this.$route.query.plan

注：
1.参数的key/value会显示在地址栏，并且刷新页面参数不丢失。

动态路由

路由定义

    {
        path: "/user/:id",// 动态路径参数 以冒号开头
        component: user,
    },

html部分

    <router-link :to="{ path: '/user/456' }"
      >动态路由匹配</router-link>

参数接收

	this.$route.params.user

注:
1.我们也可以使用动态路由匹配的方式来实现参数的传递，一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

注意事项

路由参数类型

路由参数值只支持字符串类型，如果要传递多个属性，建议使用对象进行传参，利用query方式，在传递参数之前先将参数值由对象转化为字符串，同样接收的时候再由字符串转换回对象类型。

html部分

	<router-link
      :to="{
        path: 'register',
        query: { account },
      }"
      >query传参</router-link>

<script>
	export default {
	  data() {
	    return {
	      account: "",
	    };
	  },
	  mounted() {
	    this.account = JSON.stringify({ id: "456", name: "小赵", sex: "男" });
	  },
	};
</script>

参数接收

	JSON.parse(this.$route.query.account)