欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

动态路由

程序员文章站 2022-06-03 18:26:02
...

在某些情况下,一个页面的path路径可能不确定,动态确定。

比如我们进入用户登录界面时,希望路径是:/user/name,也就是除了前面的/user还要跟上用户的id。这种path和component的匹配关系,叫动态路由(路由传递数据的一种方式)。

定义一个user组件:

<template>
  <div>
    <h1>我是用户</h1>
  </div>
</template>

<script>
    export default {
        name: "user",
    }
</script>

<style scoped>

</style>

配置组件路径映射:
注意这里的:/id

    {
      path:'/user/:id',
      name:'user',
      component:user
    }

使用该组件
id从data里面动态获取,用v-bind绑定router-link的to属性,这里需要字符串拼接

<template>
  <div id="app">
    <router-view/>
    <router-link to="home" tag="button" replace active-class="active">Home</router-link>
    <router-link to="About" tag="button">About</router-link>
    <router-link :to="'user/'+userID" tag="button">user</router-link>

  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      userID:"张三"
    }
  }
}
</script>

结果:动态路由
如果要在user组件中显示该id,
在user组件中获取id:

<template>
  <div>
    <h1>我是用户</h1>
    {{$route.params.id}}
  </div>
</template>

这里需要区分$ router 和$ route,前者是获取创建的路由实例(new Router),后者是获取活跃的路由(也就是目前显示的组件)。
注意这里的$route.params.id的id是对应前面配置路径映射path的冒号后面的id,如果冒号后面是abc那么这里也应该是abc

动态路由

相关标签: vue