Vue 动态路由

动态路由

动态路由传参

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index
  },
  {
    path: '/detail/:id',// :id 为占位符，在使用的时候传入对应的id，动态路由 通过一个占位来匹配变化的位置
    name: 'Detail',
    // 开启 props，会把 URL 中的参数传递给组件
    // 在组件中通过 props 来接收 URL 参数
    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 路由懒加载提高性能
    component: () => import(/* webpackChunkName: "detail" */ '../views/Detail.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

//Detail.vue
<template>
  <div>
    <!-- 方式1： 通过当前路由规则，获取数据 （这种方式强依赖于路由，也就是说在使用这个组件时必须由路由来传递对应的参数）（不推荐使用这种方式） -->
    通过当前路由规则获取：{{ $route.params.id }}

    <br>
    <!-- 方式2：路由规则中开启 props 传参 （不依赖路由规则）（推荐使用这种方式） -->
    通过开启 props 获取：{{ id }}
  </div>
</template>

<script>
export default {
  name: 'Detail',
  props: ['id'] // 通过 props 来接收 id 参数
}
</script>

<style>

</style>