vue router 文档阅读理解

vue router 文档阅读理解
每个守卫方法接收三个参数：
to: route 即将要进入的目标路由对象
from route 当前导航正要离开的路由
next function 确保要调用 next 方法，否则钩子就不会被 resolved

conts router = new VueRouter（）

// 使用router.beforeEach() 注册一个全局前置守卫
router.beforeEach((to,from,next)=>{
	next();// next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)
	next(false); // 中断当前导航
	next("/) // 跳转到一个不同的地址
})

// 全局后置钩子，钩子不会接受next函数，也不会改变导航本身
router.afterEach((to,from)=>{
})

路由独享的守卫（可以在路由配置上直接定义 beforeEnter 守卫）

	const router = new VueRouter({
	  routes: [
		{
		  path: '/foo',
		  component: Foo,
		  beforeEnter: (to, from, next) => {
			// ...
			// 设置返回顶部之类的功能
		  }
		}
	  ]
	})

组件内定义路由导航守卫，类似生命周期

beforeRouteEnter(to, from, next){
	// 渲染改组件对应路由被confirm前调用
	// 不能获取组件this 因为当前守卫执行前组件还没有创建
	// 不过可以传一个回调给next来访问实例
	next(vm => {
		vm.method()
		// 通过 `vm` 访问组件实例
	  })
}
beforeRouteUpdate(to, from, next){
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
	// 可以访问到this(所有next不支持传实例)
}
beforeRouteLeave(to, from, next){
	// 导航离开组件时调用
	// 可以访问到this(所有next不支持传实例
	// 使用场景 内容没有保存 该导航可以使用next(false)来取消
	
	const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
	if (answer) {
		next()
	} else {
		next(false)
	}
  
}

滚动行为
切换到新路由时，想要页面滚到顶部或者是保持原先滚动位置，就像是重新加载页面那样，vue-router 可以让自定义路由切换时如何滚动
注意： 这个功能只在支持history.pushState的浏览器中使用

编程式导航
等同于 router.push()
router.push() 是编程式 该方法的参数可以是一个字符串路径，或者一个描述地址的对象(该跳转会向history添加新记录)

router.push({
	path:"home",
})

// 命名路由
router.push({
	name:"hone"
})

// 传参方有params 和query  注意提供了path，params会被忽略 所以要么写完成的url 或者使用name

 router.push({
 name:"home",
 params:{userid}
 })  // home/12
 
 router.push({ path: `/user/${userId}` }) // -> /user/123
 query // /user?userName=da&da=ac

router.replace 和router.push() 的区别就是不会向history添加新记录
声明式：

$route.hash // 获取当前路由带#
$route.fullPath
$route.matched // 数组
$route.name

复用组件可以watch监听$route 或者使用router的方法 beforeRouteUpdate(to, from, next){}

router api参考
通过作用域插槽暴露底层的定制能力（v-slot）