vue子路由

// 定义子路由的示例代码

// 首先，我们需要引入 Vue Router
import Vue from 'vue';
import VueRouter from 'vue-router';

// 确保 Vue 使用了 Vue Router 插件
Vue.use(VueRouter);

// 定义一些组件
const Home = { template: '<div>Home</div>' };
const Parent = { template: '<div>Parent <router-view></router-view></div>' };
const ChildA = { template: '<div>Child A</div>' };
const ChildB = { template: '<div>Child B</div>' };

// 创建路由配置
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/parent',
    name: 'parent',
    component: Parent,
    children: [
      {
        path: 'child-a', // 子路由路径是相对于父路由的
        name: 'childA',
        component: ChildA
      },
      {
        path: 'child-b',
        name: 'childB',
        component: ChildB
      }
    ]
  }
];

// 创建路由器实例并传递 `routes` 配置
const router = new VueRouter({
  mode: 'history', // 使用 HTML5 History 模式
  routes // 缩写为 routes: routes
});

// 创建并挂载根实例
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

解释说明：

1. 引入 Vue 和 Vue Router：首先需要确保安装了 Vue 和 Vue Router，并且在项目中正确引入。

2. 定义组件：我们定义了几个简单的组件 (Home, Parent, ChildA, ChildB)，这些组件将在路由中使用。

3. 创建路由配置：在 routes 数组中定义了两个路由：

   • / 路由对应 Home 组件。
   • /parent 路由对应 Parent 组件，并且它包含两个子路由：
     • /parent/child-a 对应 ChildA 组件。
     • /parent/child-b 对应 ChildB 组件。

4. 子路由：子路由的路径是相对其父路由的。例如，/parent/child-a 是访问 ChildA 组件的实际路径，但在定义时只需要写 child-a。

5. 创建路由器实例：使用 VueRouter 创建一个路由器实例，并将 routes 配置传递给它。

6. 挂载根实例：最后，创建并挂载根 Vue 实例，并将其与路由器关联起来。