Vue-router(嵌套路由和命名路由以及路由守卫)

一、嵌套路由

是否需要嵌套路由是根据页面结构来决定的。实际开发中，应用页面通常由多层嵌套的组件组合而成。所以，嵌套路由就是在路由里面嵌套它的子路由；其关键属性是children，children也是一组路由，可以嵌套多个组件。

• 实例代码：

import { createRouter,createWebHashHistory } from 'vue-router';
import Helloworld from '../components/Helloworld.vue';
import Home from '../components/Home.vue';

const routes=[{
	path:"/hello",
	component: Helloworld,
	// redirect 默认显示的路由子组件内容
	redirect: "/hello/baidu",
	children: [
	{
		path:"baidu",  // 子路由无需“/”
		component:()=>import("../components/Baidu.vue")
	},
	{
		path:"wangyi",
		component:()=>import("../components/Wangyi.vue")	
	}
}];

export default createRouter({
  history: createWebHashHistory(),
  routes,
});

二、命名路由

顾名思义就是给路由取名字，在Router实例中给某个路由设置名称name值。通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，通过路由的名称取代路径地址直接使用。

• 在路由配置中指定路由的名称

{
	path:'/newsDatails/:name',
	name:'newsDatails',
	component:()=>import('../components/newsDatails.vue')
}

• 在跳转过程中携带参数

<template>
	<RouterLink :to"{name: 'newsDatails', params:{name:'baisu'}}">百度新闻</RouterLink>
	<RouterLink :to"{name: 'newsDatails', params:{name:'wangyi'}}">网易新闻</RouterLink>
</template>

上述代码使用对象作为路由的时候，to前面得加冒号，表示绑定；在to属性中，name表示组件名称，params用来传递id值

三、路由守卫

1. 什么是路由守卫
   路由守卫就是路由跳转过程中的一些钩子函数，在路由跳转的时候，做一些判断或其他的操作。类似于组件生命周期钩子函数。（组件生命周期钩子函数是指在组件的不同生命阶段自动调用的方法，它们允许开发者在特定的时间点对组件的状态进行检查或修改。这些钩子函数对于理解和控制组件的行为非常重要，尤其是在处理复杂状态管理和异步操作时。）
2. 分类

a) 全局路由守卫

beforeEach(to, from, next) 全局前置守卫，路由跳转前触发
beforeResolve(to, from, next) 全局解析守卫，在所有组件内守卫和异步路由被解析之后触发
afterEach(to, from) 全局后置守卫， 路由跳转完成后触发

b) 路由独享守卫

beforeEnter(to, from, next) 路由对象单个路由配置，单个路由进入前触发

c) 组件路由守卫

beforeRouteEnter(to, from, next) 在组件生命周期beforeCreate阶段触发
beforeRouteUpdate(to, from, next) 当前路由改变时触发
beforeRouteLeave(to, from, next) 导航离开该组件的对应路由时触发

d) 参数

to : 即将要进入的目标路由对象
from : 即将要离开的路由对象
next(Function) : 是否可以进入某个具体路由，或者是某个具体路由的路径