vue-router 动态路由

vue-router 动态路由

实现：切换到user路由时在页面显示用户名信息，在url网页中显示用户名信息

在components文件夹中新建一个user.vue文件如下图所示：

user.vue代码如下：

<template>
<div>
    <h2>我是用户</h2>
    <h3>{{userId}}</h3>
</div>
</template>

<script>
export default {
    name:'User',
    computed:{
        userId(){
            return this.$route.params.userId //注意这个userId是与index文件中path中的定义名字相关
        }
    }
}
</script>

<style scoped>

</style>

index文件夹添加内容如下：

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

因为所有切换的路由都要导入在App.vue文件中，所以在app.vue代码如下：

//userId是script中获取的动态用户名
<router-link v-bind:to="'/user/'+userId" tag="button">用户</router-link>

并在data函数中添加如下数据

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

最后实现效果：