VUE之Router 如何设置子默认路由

VUE之Router 如何设置子默认路由

在Vue Router中，可以通过在路由配置中的 children 属性来设置子路由的默认路径。你需要在父路由中的 children 数组里定义一个具有 path 属性的对象，并将其设置为 "" 或 "/".

以下是一个简单的例子：

import Vue from 'vue';
import Router from 'vue-router';
import ParentComponent from './components/ParentComponent';
import DefaultChildComponent from './components/DefaultChildComponent';
 
Vue.use(Router);
 
const router = new Router({
  routes: [
    {
      path: '/parent',
      component: ParentComponent,
      children: [
        {
          // 这里设置子路由的默认路径
          path: "", 
          component: DefaultChildComponent
        },
        {
          path: "child1",
          component: () => import('./components/ChildComponent1')
        },
        {
          path: "child2",
          component: () => import('./components/ChildComponent2')
        }
      ]
    }
  ]
});
 
export default router;

在这个例子中，当用户访问 /parent 时，DefaultChildComponent 将作为默认子路由展示。

注意，子路由的默认路径是通过在 path 属性中设置一个空字符串来定义的。