vue-router 动态路由-props获取参数

router/index.js

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue' import NotFound from '../views/NotFound.vue'; Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { //动态路由-props获取参数 // props?: boolean | Object | Function, path: '/test/:id', name: 'Test', component: Test, props:true, }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '*', name: 'NotFound', component: NotFound }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router

views/Test.vue

<template> <div> 我是Test,查看动态路由参数id:{{id}} </div> </template> <script> export default { //接收id参数 props:["id"] } </script> <style lang="scss" scoped> </style>

效果截图：