vue路由

路由守卫

路由守卫用来通过跳转或取消的方式守卫导航。每个守卫方法接收三个参数（to,from,next）

to：即将要进入的路由对象

from：即将离开的路由对象

next：可选。回调函数，确保导航继续进行（中断传false，也可重定向其他路由，如：next(‘/login’)）

• 全局路由

beforeEach：全局前置守卫。路由切换前操作。

beforeResolve：全局解析守卫。在导航被确认之前、在路由组件解析渲染之前、所有组件内守卫和异步路由组件被解析之后调用。

afterEach：全局后置钩子。路由切换后执行。

import { createRouter} from "vue-router";

const router = createRouter({ ... })

router.afterEach((to, from) => {
  if (to.meta.title) {
    document.title = to.meta.title;
  }
});

• 路由独享

beforeEnter：进入路由时触发。在特定路由上定义的守卫，用于对该路由的局部拦截、验证或重定向。

const routes = [
  {
    path: '/users/:id',
    component: () => import("../view/index.vue"),
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

• 组件内路由

beforeRouteEnter：在渲染该组件的对应路由被验证前调用。不能获取组件实例 `this` ，因为当守卫执行时，组件实例还没被创建。

beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用。举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，由于会渲染同样的`UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`。

beforeRouteLeave：在导航离开渲染该组件的对应路由时调用。它可以访问组件实例 `this`。

<template>
	<h2>我是内容</h2>
</template>

<script>
	export default {
		name:'Index',
		/* mounted() {
			window.aboutRoute = this.$route
			window.aboutRouter = this.$router
		},  */
		mounted() {
			// console.log(,this.$route)
		},

		//通过路由规则，进入该组件时被调用
		beforeRouteEnter (to, from, next) {
            next()
		},

		//通过路由规则，离开该组件时被调用
		beforeRouteLeave (to, from, next) {
			next()
		}
	}
</script>

 路由传参

路由传参的基本方式

params传参（不显示参数）指的是, 可以在url路径上不显示参数, 因为配置路由的时候我们不需要在路径上写东西来承接params。这种传参只能通过路由别名name作为指定对象，不能使用路由路径path。

路由模式

hash和history模式