页面获取URL中的name动态路由

1.components在新建User.vue页面

2.index.js导入搭建

import User from '../components/User.vue'

  {
    path: '/user/:userId',
    component: User
  },

3.App.vue定义数据和引用

 data(){
    return {
      userId:'zhangsan',
    }
  },

   <router-link :to="'/user/'+userId" tag="button" replace>用户</router-link>

4.User.vue页面

<template>
  <div>
    <h2>用户页</h2>
    <p>我是用户{{userId}}</p>
    <!-- 第二种，直接展示<p>我是用户{{$router.params.userId}}</p> 同上-->
​
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  activated() {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
  computed: {
    userId() {
      return this.$route.params.userId;
    },
  },
};
</script>
<style>
</style>
​