vue-router 动态路由xxx:id-$route.params.id

router/index.js

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

views/Test.vue

<template> <div> 我是Test,查看动态路由参数id:{{this.$route.params.id}} </div> </template> <script> export default { created () { console.log(this.$route.params.id);; }, } </script> <style lang="scss" scoped> </style>