第11章插件

注册插件需要一个公开的方法install,它的第一个参数是Vue构造器，第二个参数是一个可选的选项对象。
通过Vue.use()来使用插件
11.1 前端路由与vue-router
webpack的主要使用场景是单页面富应用（SPA），而SPA的核心就是前端路由。
大多数的网页都是后端路由，也就是多页面。
SPA：其实就是在前后端分离的基础上，加一层前端路由。

前端路由，即由前端维护一个路由规则。
一：利用url的hash，就是常说的描点（#）
二：HTML5的History模式，它使url看起来像普通网站那样，以”/”分割，没有#,但页面并没有跳转，不过使用这种模式需要服务端支持，服务端在接收到所有的请求后，都指向同一个html文件，不然会出现404。

11.2 vue-router基本用法
this.$route可以访问到当前路由的很多信息。

11.1.3 跳转
vue-router有两种跳转页面的方法，
第一种是使用内置的组件

<router-link to="/about">跳转到about</router-link>

第二种 router实例的方法，类似window.location.href

this.$router.push('/user/123');

11.1.4 高级用法
vue-router提供了导航钩子beforeEach和afterEach，它们会在路由即将改变前和改变后触发。

router.beforeEach((to, from, next)=>{
  window.document.title = to.meta.title;
  next();
})

导航钩子有3个参数：
*to 即将要进入的目标的路由对象
*from 当前导航即将要离开的路由对象
*next 调用该方法后，才能进入下一个钩子
路由列表的meta字段可以自定义一些信息。
next()方法还可以设置参数：如校验是否登陆

router.beforeEach((to,from,next)=>{
    if(window.localStorage.getItem('token')) {
        next();
    } else {
        next('/login');
    }
});

第11章 插件

猜你喜欢