Vue学习：26-重定向路由和嵌套路由

一、重定向路由

在路由规则中，可采用redirect来重定向另一个地址

修改src/router/index.js

import { createRouter,createWebHistory } from "vue-router";
import BlogHomeView from '@/views/BlogHomeView.vue'

let routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',  //URL地址
    name: 'home',   //名称
    component: () => import('@/views/HomeView.vue')  //渲染该组件
  },
  {
    path: '/blog',
    name: 'blog',
    component: BlogHomeView
  }
]

//创建路由
const router = createRouter({
  history: createWebHistory(),  // 使用history模式路由
  routes    //路由规则
})

export default router   //暴露出去

二、嵌套路由

如果在路由视图中展示的组件中包含自己的路由占位符，则此处会用到嵌套路由

如图所示：点击关于链接，则会显示About组件，在其组件中又包含了路由链接和路由占位符

嵌套路由规则：

1、在某一个路由规则中采用children来声明嵌套路由的规则

2、嵌套路由规则中的path不能以/开头，访问需使用/father/son的形式

实例：

在views目录下，建立四个组件HomeView.vue、SchoolHomeView.vue、MathView.vue、EnglishView.vue

HomeView.vue

<template>
  <div class="home">网站首页界面</div>
</template>

<style scoped>
  div.home {
    padding: 50px;
    background-color: pink;
  }
</style>

SchoolHomeView.vue

<template>
  <div class="school">
    学堂首页界面：
    <router-link to="/school/english">英语</router-link>
    <router-link to="/school/math">数学</router-link>

    <hr>

    <!-- 该组件中自己的路由视图 -->
    <router-view/>
  </div>
</template>

<style scoped>
  div.school {
    padding: 50px;
    background-color: rgb(99,228,99);
  }
</style>

MathView.vue

<template>
  <div class="math">数学界面</div>
</template>

<style scoped>
  div.math {
    padding: 50px;
    background-color: rgb(236,129,67)
  }
</style>

EnglishView.vue

<template>
  <div class="english">英语界面</div>
</template>

<style scoped>
  div.english {
    padding: 50px;
    background-color: rgb(40,136,214)
  }
</style>

修改src/router/index.js

import { createRouter,createWebHistory } from "vue-router";
import HomeView from '@/views/HomeView.vue'
import SchoolHomeView from '@/views/SchoolHomeView.vue'
import MathView from '@/views/MathView.vue'

let routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',  //URL地址
    name: 'home',   //名称
    component: HomeView  //渲染该组件
  },
  {
    path: '/school',
    name: 'school',
    component: SchoolHomeView,
    //嵌套路由，下面要展示的组件需要在父级路由的组件中（router-view）进行展示
    children: [
      {
        path: 'english',  //嵌套路由中的path前面不要加/
        name: 'school-english',
        component: () => import('@/views/EnglishView.vue')
      },
      {
        path: 'math',
        name: 'school-math',
        component: MathView
      }
    ]
  }
]

//创建路由
const router = createRouter({
  history: createWebHistory(),  // 使用history模式路由
  routes    //路由规则
})

export default router   //暴露路由出去

App.vue

<script setup>
  import { ref } from 'vue' 
  
</script>

<!-- 视图区域（view） -->
<template>
  <!-- 路由链接，点击后路由地址会切换到属性to的地方 -->
  <router-link to="/home">首页</router-link>
  <!-- 学堂组件中有嵌套路由链接和占位符 -->
  <router-link to="/school">学堂</router-link>

  <hr>
  <!-- 路由视图，路由切换组件展示的地方 -->
  <router-view/>
</template>
<style>
 
</style>