vue的动态路由

3月

本文最后更新于2022年09月23日，已经过了592天没有更新，若内容或图片失效，请留言反馈

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户页面时，希望时如下的路径

/user/idA或/user/idB
除了有前面的/user外，后面还跟上了用户的id
这种path和Component的关系，我们称之为动态路由（也是路由传递数据的一种方式）

想要使用动态路由
在配置映射关系时在path中需要跟上动态的路径名称
比如我想在/user后接上用户的id

{
  path: '/user/:userId',
  name: 'User',
  component: () => import('../views/User.vue')
}

在App.vue中通过router-link跳转到User组件时需要在/user后接上userId的值

  <router-link to="/user/123">User</router-link>

运行后点击user
请输入图片描述

请输入图片描述

但是在开发中userId一般是动态获取

//根组件App.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <!-- 通过v-bind在/user后动态绑定userId-->
      <router-link :to="'/user/'+userId">User</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data(){
      return{
        //请求到的userId
        userId:"123"
      }

    }
  }
</script>

如果我们想在User组件中获取到它userId的值该怎么办呢
通过this.$route.params获取

//User.vue
<template>
    <div id="user">
        <h1>this is a user page</h1>
        <h2>用户id是{{getUserId}}</h2>
    </div>
</template>

<script>
    export default {
        name: "User",
        computed:{
            getUserId(){
                //以获取当前路由的userId
                return this.$route.params.userId;
            }
        }
    }
</script>

运行结果
请输入图片描述