vue3 路由怎么使用，当有二级路由嵌套的时候，默认打开一级嵌套下的二级路由

在Vue3中，使用Vuex Router（Vue官方推荐的路由管理库Vuetify或@vue/cli-plugin-router）设置二级路由嵌套并默认打开一级路由下的某个二级路由，可以按照以下步骤操作：

1. **安装依赖**:
首先确保已安装`@vue/router`和`vuex`库：

   npm install @vue/router vuex --save

2. **配置路由**:
在`src/router/index.js`文件中，创建路由配置。假设你有一级路由`/parent`和其下的一级子路由`/parent/child`：

   import { createRouter, createWebHistory } from 'vue-router';
   import ParentComponent from './components/Parent.vue';
   import ChildComponent from './components/Child.vue';

   const routes = [
     {
       path: '/parent',
       component: ParentComponent,
       children: [
         {
           path: '/child',
           component: ChildComponent,
           name: 'ChildRoute', // 可选，用于导航
         },
       ],
     },
   ];

   const router = createRouter({
     history: createWebHistory(), // 使用浏览器的HTML5 History API
     routes,
   });

   export default router;

3. **组件中导航**:
在`ParentComponent`内，你可以使用`router.push`来默认跳转到`/parent/child`：

   <template>
     <div>
       <!-- 父级组件内容 -->
       <button @click="defaultToChild">默认打开二级路由</button>
       <router-view></router-view> <!-- 渲染当前层级的路由 -->
     </div>
   </template>

   <script>
   export default {
     methods: {
       defaultToChild() {
         this.$router.push('/parent/child');
       },
     },
   };
   </script>

4. **在入口处使用路由**:
在`main.js`或`App.vue`中，你需要挂载路由器：

   import Vue from 'vue';
   import App from './App.vue';
   import router from './router'; // 引入你的路由实例

   new Vue({
     router,
     render: (h) => h(App),
   }).$mount('#app');

当你运行应用时，访问`http://your-app-url/parent`会默认显示`/parent/child`页面。如果需要用户从其他地方导航，可以直接使用`<router-link :to="'/parent/child'" />`。