VueRouter动态获取路由

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

• /user/zhangsan 或者 /user/lisi
• 除了有前面的/user之外，后面还跟上了用户的ID
• 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)

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

<div>
   <h2>{{ $route.params.id }}</h2>
</div>

<router-link to="/user/123">我是用户</router-link>

配置路由映射关系

// index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入User组件
import User from '../components/User.vue'

Vue.use(VueRouter)

const abcd = [
 // 在这里配置
 {
   path: '/user/:abc',
   component: User
 }
]

const router = new VueRouter({
 routes: abcd,
 mode: 'history'
})

export default router

动态获取user路径后面的ID

<!--App.vue-->

<template>
  <div id="app">
  	<!--这里动态获取userh后面的iD-->
    <router-link :to="'/user/'+userID">用户</router-link>
    <router-view></router-view>
  </div>
</template>

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

<style>

</style>

当点击用户的时候就是这样子

在user界面获取路径后的id并且打印在页面中

• 这里是 $route 获取的不是 $router
• $router是index.js里面的new VueRouter里的
• $route是当前哪一个路由处于活跃状态拿到的就是那个路由
• $router : 是路由操作对象，只写对象，专门用来操作路由的
• $route : 路由信息对象，只读对象，专门用来获取路由对象信息的

// $route是获取的这里面的路由，那个处于活跃状态就拿到的是哪个
const abcd = [
{
   path: '/hemo/',
   component: Home
},
{
   path: '/about/',
   component: About
},
{
  path: '/user/:abc',
  component: User
}
]

// $router获取的是这个nwe出来的VueRouter
const router = new VueRouter({
routes: abcd,
mode: 'history'
})

<!--User.vue-->

<template>
  <div>
    <h2>我是用户User界面</h2>
    <!--简单的方法一步到位-->
    <!--<h2>{{ $route.params.userID }}</h2>-->

	<!--使用computed计算属性获取-->
    <h2>{{ listID }}</h2>
  </div>
</template>

<script>
  export default {
    name: 'User',
    computed: {
      listID() {
      	// params是参数的意思，params后面的.userID是 path: '/user/:abc',
        return this.$route.params.abc
      }
    }
  }
</script>

<style>

</style>