vue-router

路由定义

根据不同的url地址呈现不同的内容或页面。

路由的三大组成部分

• router配置
• 导航
• 视图

路由的跳转方式

• 声明式导航：标签导航跳转
• 编程式导航：js跳转方式

路由跳转方法

• push:向历史记录添加一条
• replace：用最新的地址替换当前历史记录
• back：返回上一个历史记录
• go：通过数字控制前进后退

路由模式

mode:

• hash 描点路由
• history 历史路由（h5history对象封装的）
• abstract 给nodejs服务端渲染用的 *服务端渲染

路由传参

• query 以？开头的get请求传参方式
• params 动态路由是显示传参，非动态路由使用params传参叫隐式传参。隐式的参数在内存里，刷新页面就丢了。【params传参只能通过命名路由name跳转】
• meta 元数据，用于传参，更多情况下用于配置路由的权限
• router-view

路由拦截器（守卫|路由的生命周期）

每一个路由守卫都有一个回调函数，该函数里有三个参数，分别是： to:即将要进入的路由对象 from：即将要离开的路由对象 next:必执行函数，默认参数true，false则阻止路由跳转

全局

• beforeEach 前置守卫，路由权限写在这里
• afterEach 后置守卫，没有next

组件内

• beforeRouteUpdate 准备路由更新
• beforeRouteLeave 准备离开路由

路由类型

• 动态路由：一组拥有相同基础路径的路由，加载的是同一个页面。
• 嵌套路由：一组拥有相同基础路径的路由，加载的是不同页面。

路由配置的api

• name 路由命名，给路由取个名字
• path 匹配浏览器地址栏里的地址
• component 加载组件
• alias 给路由取别名
• redirect 重定向
• meta 元数据，用于路由配置里的传参
• children 嵌套路由里的api

{
  path:"/book/:id",
},
{
  path:"/book",
  conponent:Book,
  children:[
    {
      path:"hot",component:Hot
    }
  ]
}

路由实例配置

mode, routes, scrollBehavior

vue 路由知识总结

原文：https://www.cnblogs.com/2773037489-qq/p/14844576.html