vue 路由重定向和路由嵌套

路由重定向

redirect 可以进⾏路由的重定向
router/index.js

const routes = [
{
    // 路由重定向
    path:'/',
    redirect:'/index',
  },
]

路由嵌套

声明路由的时候设置children,children是⼀个数组，数组⾥是路由对象
这个children的组件就会渲染在它⽗组件的中
app.vue

<template>
 <!-- 通过这个路由的嵌套，我们可以实现⼀些布局 -->
 <div id="app">
 <router-view></router-view>
 </div>
</template>

src/router/index.js

const routes = [
 {
 path: '/',
 // 通过这种⽅式，在访问/路径的时候会重定向到/login路径
 redirect: '/parent'
 },
 {
 path: '/parent',
 component: ParentComp,
 // 涉及到了⼦路由的内容
 children: [
 {
 // 这就是⽤相对路径，相对于⽗组件的，这个实际路径就是/parent/login
 path: 'login',
 component: login
 },
 {
 path: 'registry',
 component: registry
 }
 ]
 }
]

src/views/ParentComp.vue组件

<template>
 <div>
 <h1>登录注册⻚⾯</h1>
 <router-link to='/parent/login'>登录</router-link>
 <router-link to='/parent/registry'>注册</router-link>
 <router-view></router-view>
 </div>
</template>