29-动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用User这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数” 来达到这个效果：

user.vue

<template>
    <div>欢迎用户{{this.$route.params.userId}}登录成功
        <div> 参数：{{this.$route.query.id}}</div>
    </div>
</template>

router--->index.js

{
  path: '/About/:userId',    
  name: 'About',
  component: About
},

login.vue

<template>
  <div>
    <input type="text" v-model="userId" />
    <button @click="login">登录</button>
    <!-- <router-link :to='"/About/" + userId'>登录</router-link> -->
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      userId: ""
    };
  },
  methods: {
    login() {
      this.$router.push({ path: "/About/" + this.userId, query: { id: 123 } });
    }
  }
};
</script>

登陆.png 登陆成功.png