vue 动态路由

作者：寂寞味道发布日期:2025-06-27 浏览:57

// Vue 动态路由示例代码

// 1. 定义路由配置
const routes = [
  {
    path: '/user/:id', // 动态路径参数 :id
    component: User
  },
  {
    path: '/product/:category/:id', // 多个动态路径参数 :category 和 :id
    component: Product
  }
];

// 2. 创建 Vue Router 实例
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
});

// 3. 在组件中使用 $route 访问动态参数
new Vue({
  router,
  template: `
    <div id="app">
      <h1>用户信息</h1>
      <p>用户ID: {{ $route.params.id }}</p>
      <router-view></router-view>
    </div>
  `
});

// 解释说明：
// - `:id` 和 `:category` 是动态路径参数，可以在 URL 中变化。
// - `$route.params` 可以在组件中访问这些动态参数。
// - `router-view` 是一个占位符，用于渲染匹配到的组件。

上一篇：vue图标

下一篇：npm create vue@latest