vue-router作为vue中最基础的服务，学习一段时间，总结面临的需求
已经配置了使用vue-cli作为开发前提的vue-router
路由的写法
routes: [
{
path: '/cart '，
name: 'cart '，
组件： Cart，
meta :{ title: '购物车' }//用于指定页面名称
}
]
虚路由器路由跳转的方法
第一个：编程式导航
耳机通道
//to是prop。 也可以指定要跳转的路径，或使用v-bind动态设置
//tag可以指定呈现为标签，默认值为a标签
跳回去
//这样的写法不会留下历史的痕迹，返回键无效
用户
///product/1
第二个：函数表达式导航
//现在，假设我跳至产品页面并带有参数id
//在此将list.id定义为动态值
写为this.$ router.push ('./product/' list.id ) /字符串
this.$ router.push ({ name : ' product '，Params3360 ) id:list.id} ) /描述命名路由的方式
直接定义this.$ router.push ({ path : `/product/$ { list.id } ` } ) path类似于第一类
//常用的跳转路由方法
//如果带查询参数
router.push(path:'product '，query: ) id:list.id ) )///product？ id=1
由于此方法会将新记录添加到history堆栈中，因此用户单击浏览器的“后退”按钮将返回到上一个URL。
单击害羞的冬瓜时，此方法会在内部调用，因此单击与调用router.push(…)相同。
需要注意的是，如果提供了path，则params配置无效
有几种方法
使用与方法名称相同的——替换当前history记录，而不是将新记录添加到router.replace//history中
在router.go(1)//浏览器记录中继续前进，则为history.forward ) )
router.go(-1 )//后退一步记录，与history.back )相同
router.go(n )//浏览器记录前进三步
基本的使用量就这么多
如果需要命名视图路由重定向等，请访问官方网站
基本知识大概就这么多
现在让我们谈谈两个导航卫士——after each before each——的区别
顾名思义，vue-router提供的导航卫士主要用于在跳转或取消时保护导航。 在全局、单一路由或组件级别，路由导航过程有各种机会。
记住参数或查询的更改不会触发进入/退出导航触发。
在全球卫士中
beforeEach全球前卫
当触发导航时，全局前卫将按创建顺序调用。
每个防护方法接收三个参数。
to: Route:即将访问的目标路由对象
from: Route:当前要退出导航的路由
next: Function:必须始终调用此方法来对此挂接进行resolve。 执行效果取决于next方法的调用参数。
router.beforeeach((to，from，next )={
控制台. log (to； //即将进入的路由对象
控制台. log (from； //导航当前要离开的根对象
next (； //可以调用此方法进入下一个挂接
() )
//这样写的话，各个参数的意思就会变得很清楚
next ) ) :进行管道内的下一个挂钩。 执行所有挂接后，导航状态已确认。
next(false ) :中断当前导航。 如果浏览器的URL发生更改(用户可能手动或按下了浏览器的后退按钮)，则URL地址将重置为与from根目录对应的地址。
next((/)或next ) ) path: )/) ) :跳到另一个地址。 当前导航中断，进行新的导航。 可以将任意位置的对象传递给next，并可以设置replace: true、name: 'home '等选项以及router-link上的toprop或router.push使用的选项
使其调用next方法。 否则，钩子不会被解析
afterEach全球后钩
router.aftereach((to，from )={
//.
() )
但是，与保护不同，这些挂接不接受next函数，也不改变导航本身
从使用的角度来看，前台挂钩更常用，如登录认证和在Vue单页中引用规定页面名称
router.beforeeach((to，from，next )={
if(to.meta.title ) {
document.title=to.meta.title； //在路由中写入的元中的title字段
}
next (；
() )
组件中的门卫请看官方网站的例子