动态路由
动态路由传参
// 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>
