动态路由

动态路由

path: ‘/dynamic/:params’, params 指参数key,key前面必须要：

import VueRouter from "vue-router"
import Vue from "vue"
import Home from "@/components/Home"
import About from "@/components/About"
import Btn1Component from "@/components/Btn1Component"
import Btn2Component from "@/components/Btn2Component"
import Dynamic from "@/components/Dynamic";


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

/**
 * 创建路由对象
 * @type {*[]}
 */
const routes = [
   {
      path: '/',
      redirect: '/home'
   },
   {
      path: '/home',
      component: Home
   },
   {
      path: '/about',
      component: About
   },
   {
      path: '/btn1Component',
      component: Btn1Component
   },
   {
      path: '/btn2Component',
      component: Btn2Component
   },
   {
      path: '/dynamic/:params',
      component: Dynamic
   }
]

/**
 * 初始化路由 配置
 * @type {VueRouter}
 */
const router = new VueRouter({
   routes,
   mode: 'history',
   linkActiveClass: 'active'
})

/**
 * 导出路由
 */
export default router

Dynamic.vue

<template>
  <div>
    <div>我是动态路由</div>、
    <div>我是获取动态路由传递过来的数据：{{userId}}</div>
  </div>
</template>

<script>
export default {
  name: "Dynamic",
  computed: {
    userId(){
      //this.$router.params 获取当前路由参数
      // 最后params 与 path: '/dynamic/:params',一致
      return this.$route.params.params
    }
  }
}
</script>

<style scoped>

</style>

效果