怎么定义 vue-router 的动态路由?
在 Vue.js 中,使用 vue-router 定义动态路由是一种常见的做法,允许应用程序根据 URL 参数或查询字符串动态加载组件或内容。下面是如何定义和使用动态路由的步骤。
一、安装 vue-router
首先,确保你的项目中已经安装了 vue-router:
npm install vue-router
二、定义动态路由
动态路由通过在路由路径中使用冒号(:)来定义参数。例如,如果你希望根据用户 ID 动态加载用户详情页面,可以这样定义路由:
// router/index.js 或 router.js
import Vue from 'vue';
import Router from 'vue-router';
import UserDetail from '@/components/UserDetail.vue';
Vue.use(Router);
const routes = [
{
path: '/user/:id', // 动态路由,:id 是动态参数
name: 'UserDetail',
component: UserDetail
},
// 其他路由...
];
const router = new Router({
mod