Vue - vue-router动态路由

---

一、动态路由

在某些情况下, 一个页面的path路径可能是不确定的, 比如我们进入用户界面时, 除了前面的/user之外, 后面还跟上用户的ID : /user/aaa

1.1 设置动态路由

import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'

// 安装插件
Vue.use(VueRouter)

// 配置路径和路由之间的映射关系
const routes = [
  {
    // 缺省的时候显示component里面的组件
    path: '',
    // 重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    // 动态路由,后面必须跟一个userId
    path: '/user/:userId',
    component: User
  }
]

// 创建路由组件
const router = new VueRouter({
  routes,
  // 修改为history模式
  mode: 'history'
})

export default router

1.2 动态给路由绑定userid

<template>
  <div id="app">
    <h2>我是标题</h2>
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" tag="button">关于</router-link>
    <!-- 动态给to属性绑定userid -->
    <router-link v-bind:to="'/user/'+userid" tag="button">用户</router-link>
    <router-view/>
  </div>
</template>

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

<style>
  .router-link-active{
    color: red;
  }
</style>

二、在User组件里面显示id信息

2.1 this.$route

this.$route匹配的是routes中处于活跃的路由

2.2 this.$route.params

this.$route.params : 表示路由里的参数

获取path 里面定义的userid : this.$route.params.userId

<template>
  <div>
    <h3>
      我是User
    </h3>
    <!-- 获取传递过来的userid -->
    <h2>{{$route.params.userid}}</h2>
  </div>
</template>

<script>
  export default {
    name: 'User',
  }
</script>

<style>

</style>