vue-router常问知识点

概念：

• 前端路由：在单页面应用中，js可以拦截页面的跳转请求，动态获取新的数据，无需重新加载的情况下更新当前页面
• 后端路由：用户访问的 URL 路径返回不同的响应结果

两种模式

hash模式

• 使用哈希字符（#）http://ppt.com#home看起来较丑。这部分 URL 从未被发送到服务器，改变hash不会重新加载页面，
• 每一次改变hash（window.location.hash），都会在浏览器的访问历史中增加一个记录，改变hash可以监听到hashchange事件
• 使用query传参，刷新页面参数不丢失

history模式

• 利用HTML5 History api来操作浏览器历史记录栈。
• 这种模式看起来url很正常，http://ppt.com/user/id;
• 如果没有适当的服务器配置，用户在浏览器中直接访问 http://ppt.com/user/id，就会得到一个 404 错误。
• 使用params传参，对应的只能使用name，不能使用path参数；刷新页面参数会丢失，可以将参数先缓存起来；

router 与 route 区别

• router 为 VueRouter 实例，拥有自己的方法，如： router.push 跳转。
• route 为当前活跃状态路由对象，有当前路由的信息。包括 path、params参数、query等

路由组件

• router-link 用于导航,相当于a链接
• router-view 用于占位，路由匹配到的组件将渲染在这

<!-- 添加路由 -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>

<!-- 展示路由内容 -->
<router-view />

router-link的属性

tag属性，告诉router-link要渲染成什么标签。没有tag标签，默认渲染成a链接

// 渲染成button
<router-link tag="button">首页</router-link>

active-class 点击当前router-link选中的类，做样式切换 页面跳转方式 声明式 <router-link :to="..."> 编程式 router.push(...)

<router-link :to="{ path:'/', query:{ id:'123'}}">
</router-link>
//
this.$router.push({
 name: 'home' , params: { id:'123' }
})

路由懒加载

打包构建应用时，JavaScript 包会变得非常大;当路由被访问的时候才加载对应组件;可大大提高效率

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

动态路由

某种情况下，一个组件它对应的路径是不确定的；比如：详情页面,路径后面是不同的详情id

routers:[
 {
   path: '/goods/:id',
   component:()=>{ import('../views/goods/detail.vue') }
 }
]

参数变化

当从详情调到详情时，比如：在详情A页面中打了个详情B的广告链接。此时详情id变了，但组件会被复用，即组件的生命周期钩子不再被调用。此时想要页面做出响应，有两种方式：

1.watch监听route对象

watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }

2.路由更新钩子

beforeRouteUpdate(to, from, next) {
    // ...
  }

路由钩子

全局钩子

• 全局前置守卫 router.beforeEach
• 全局解析守卫 router.beforeResolve
• 全局后置守卫 router.afterEach

router.beforeEach((to, from, next) => {
  // ...
})
router.afterEach((to, from) => {
  // ...
})

路由独享的守卫

• beforeEnter 进入路由时触发

组件内的守卫

• beforeRouteEnter 渲染该组件的对应路由被验证前调用
• beforeRouteUpdate当前路由改变，但是该组件被复用时调用
• beforeRouteLeave 导航离开渲染该组件的对应路由时调用

守卫的三个参数：

• to: 即将要进入的目标 路由对象

• from: 当前导航正要离开的路由

• next: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  • next() : 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
  • next(false) : 中断当前的导航。
  • next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。
  • next(error) : (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError()

导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。