vue：router路由相关

vue：router路由相关

• vue的插件库，专门用来实现SPA(单页面)应用，整个页面只有一个完整的页面，点击连接中的导航不会刷新页面，只会做页面的局部更新，数据需要通过ajax请求获取

• 两种模式：history模式、hash模式

• 路由：一个路由就是一组映射关系(key-value)，key为路径，value可能是函数也可能是组件

• <router-link>：实现路由的切换

• <router-view>：指定展示的位置
  注意点

• pages文件通常放置路由组件，component通知放一般组件

• 通过切换，隐藏的组件被销毁，显示的时候再去挂载

• 整个应用只有一个router，$router获取

• 多级路由/嵌套路由：一级路由中配置children，再<route-link>中带上一级路由path名

• 命名路由：在路由规则中配置name属性，to属性中配置name属性即可，注意参数取值：参数如果配置在query中，就在query中取值，如果配置在路径中，路由规则需要使用占位符:id，参数在params中取值

• props用法：路由规则中配置props，可以简化组件在取值的重复代码的编写，但是需要定义props用于接收参数

• route-link：有两种操作历史记录模式：push和replace，一种是追加，一种是替换，默认是push模式

• 编程式路由导航：不借助route-link实现路由跳转，让路由跳转更加灵活，push、replace、go(val)、back

• 缓存组件：让不展示的组件挂载，不被销毁，<keeplive :include='['','']'>

• 全局路由守卫：beforeEach和afterEach，前置路由使用next()控制是否放行，后置守卫控制切换路由之后某些场景数据的展示，比如页面title，路由规则中可以配置meta属性，自定义属性对象isAuth:true，用于判断是否需要验证权限

• 独享路由守卫：beforeEnter:{}，只有某个特定的路由需要权限，在路由配置规则中添加

• 组件内路由：beforeRouteEnter(to,from,next){}、beforeRouteLeave(to,from,next){}

2021-12-13