不是第一

路由的传参

方式一 : 直接跟在url路径后面. /login?id=XX&name=XX

方式二 : 使用restful风格. /register/id/name

this.$route : 获取路由对象.

  • query : 适用于?后面拼接的参数
  • params : 适用于/

$router 和 $route

  • 在 Vue 实例内部，你可以通过 router 访问路由实例。因此你可以调用 this.router.push

DANGER

这是两个不同的作用
this.router<br>this.router <br> this.route

  • this.$router.push({path:'/home'}) 更改路由配置
  • this.$route.params 获取当前路由参数信息等

使用路径匹配的方式

修改路由配置

  • router.js
 // 动态路径参数 以冒号开头
{ path: '/user/:id', component: User },
{path: '/user/profile/:id', name:'UserProfile', component: UserProfile}

说明：主要是在 path 属性中增加了 :id 这样的占位符

传递参数

<router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>

说明：此时我们将 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径；

代码方式

this.$router.push({ name: 'UserProfile', params: {id: 1}});

接收参数

在目标组件中使用

{{ $route.params.id }}

来接收参数

使用 props 的方式

修改路由配置

{
        path: 'nav/:ps',
        name: 'Nav',
        props: true ,
        component: () => import( /* webpackChunkName: "about" */ '@/views/per/Nav.vue')
}

说明：主要增加了 props: true 属性

传递参数

toUser() {
      this.$router.push({ name: "Nav", params: { ps: "uuid hello world" }  });
}

接收参数

为目标组件增加 props 属性， 模板中使用

<template>
  <div class="nav">
    <h2>{{ ps }}</h2>
  </div>
</template>
<script>
// @ is an alias to /src

export default {
  name: "Nav",
  props: {
    ps: String,
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {
    console.log(this.$route);
  },
};
</script>