22.动态路由

首先，我们先创建一个user的组件

<template lang="">
    <div>
        <h2>我是用户中心</h2>
        <p>我是用户中心内容</p>
    </div>
</template>
<script>
export default {
    name: 'user',
}
</script>
<style lang="">
    
</style>

然后，在routes这个属性中，建立映射关系，这里需要通过:id的方式，这里的id名字可以随便起，如果我们要在页面中拿到这个路径的时候需要引用这个变量

let routes = [
    {
      path: '/',
      redirect: '/Home'
    },
    {
      path: '/Home',
      component: Home
    },
    {
      path: '/About',
      component: About
    },
    {
      path: '/User/:userId',
      component: User
    }
]

接着，我们就可以在app.vue这个主页面中这样写，在组件的data中定义一个用户名，然后通过v-bind绑定to属性，这样就可以拿到data中定义的用户名了

<template>
  <div id="app">
    <router-link to="/Home">首页</router-link>
    <router-link to="/About">关于</router-link>
    <router-link :to="'/User/'+ userId">用户</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'lisi'
    }
  },
  methods: {
    
  }
}
</script>

<style>

</style>

如果我们想在页面中user组件中拿到app.vue组件的data中定义的用户名，我们可以通过$route.params.userId来拿到，路径中的变量值

<template lang="">
    <div>
        <h2>我是用户中心</h2>
        <p>我是用户中心内容</p>
        <h1>{{userId}}</h1>
    </div>
</template>
<script>
export default {
    name: 'user',
    computed: {
        userId() {
            return this.$route.params.userId
        }
    }
}
</script>
<style lang="">
    
</style>