路由重定向

1.组件路由重定向

index.js添加redirect属性，页面打开后自动跳转至home页面

const router = new VueRouter({
    routes: [
        {path:'/',redirect:'/home'}
    ]
})

2.子路由重定向

在子路由中添加redirect属性

redirect: '/about/tab1',

index.js展示

const router = new VueRouter({
    routes: [
        {
            path: '/about', component: About,
            redirect: '/about/tab1',
            children: [
                // 子路由重定向
                // 这里的path可以加斜线，但官网不建议加
                { path: 'tab1', component: Tab1 },
                { path: 'tab2', component: Tab2 }
            ]
        },
    ]
})

第二种方法

给path的path为空值

const router = new VueRouter({
    routes: [
        {
            path: '/about', component: About,
            children: [
                // 子路由重定向
                // 这里的path可以加斜线，但官网不建议加
                // 子路由重定向第二种
                { path: '', component: Tab1 },
                { path: 'tab2', component: Tab2 }
            ]
        },
      
    ]
})

当子路由添加了路由重定向后，About.vue页面中的子路由链接就只需要写到/about就行了

    <!-- 子级路由链接 -->
     <router-link to="/about">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
    <hr/>
    <!-- 子级路由占位符 -->
    <router-view></router-view>