vue中怎么让二级子路由默认显示
更新时间：2023-12-11
在Vue中，使用路由来实现页面间的切换和导航是一种常见的方法。在Vue路由中，可以通过嵌套路由的方式来实现多级子路由的显示。如果想要让二级子路由默认显示，需要对路由配置进行相应的设置。
首先，需要在路由配置文件中设置二级子路由的默认显示。可以通过使用Vue Router的`redirect`属性将二级子路由重定向到需要显示的组件。
下面是一个示例路由配置，其中包含了两级子路由的设置：
` 标签来显示子组件。这样当路由匹配到对应路径时，子组件会在父组件中的 `` 中显示出来。
下面是 Parent.vue 组件的示例代码：
` 标签被放置在 Parent.vue 组件中，被路由匹配到的子组件会显示在这个位置。
最后，当访问父组件的路径时，会默认显示重定向的子组件。在上述示例中，当访问 `/parent` 路径时，默认会显示 `Child1` 组件。
总结一下，在Vue中实现二级子路由默认显示的方法是在路由配置中设置重定向属性，将父路径重定向到需要显示的子组件的路径，并在父组件中设置 `` 标签来显示子组件。这样在访问父路径时，会默认显示被重定向的子组件。
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Parent from '@/views/Parent.vue'
import Child1 from '@/views/Child1.vue'
import Child2 from '@/views/Child2.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/parent',
name: 'Parent',
component: Parent,
redirect: '/parent/child1', // 将/parent重定向到/parent/child1
children: [
{
path: 'child1',
name: 'Child1',
component: Child1
},
{
path: 'child2',
name: 'Child2',
component: Child2
}
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
在上面的示例中，设置了 `/parent` 路径的重定向到 `/parent/child1` ，这样当访问 `/parent` 路径时会默认显示 `Child1` 组件。
其次，需要在父组件中设置一个 `在上面的代码中，`Parent 组件
