十三 插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

添加全局方法或者 property。如：vue-custom-element

添加全局资源：指令/过滤器/过渡等。如 vue-touch

通过全局混入来添加一些组件选项。如 vue-router

添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

13.1 插件的使用

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象

插件开发

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

使用插件

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

或者

Vue.use(MyPlugin, { someOption: true })

13.2 vue-router

参考地址： https://router.vuejs.org/zh/api/

复制demo目录重命名为 vue-route；

npm install --save vue-router

在views目录下新建index.vue

<template>
    <div>
        <h1>首页</h1>
    </div>
</template>
<script>
    export default {

    }
</script>

在views目录下新建about.vue

<template>
    <div>
        <h1>介绍页</h1>
    </div>
</template>
<script>
    export default {

    }
</script>

在main.js修改内容如下，即路由配置

import Vue from 'vue';
import App from './app.vue';
import VueRouter from 'vue-router';

Vue . use(VueRouter) ;
new Vue({
    el: '#app',
    render: h => {
        return h(App)
    }
});

// 异步路由配置
const Routers = [
    {
        path: '/index',
        component: (resolve) => require(['./views/index.vue'], resolve)
    },
    {
        path: '/about',
        component: (resolve) => require(['./views/about.vue'], resolve)
    },
    // 当路径不存在时重定向至首页
    {
        path: '*',
        redirect: '/index'
    }
];
const RouterConfig = {
    // 使用 HTML5 的 History 路由模式
    mode: 'history',
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => {
        return h(App)
    }
});

webpack.json内容修改如下，使其支持 history模式

"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js"

webpack.config.js修改插配置支持异步路由的chunk打包

 plugins: [
        new ExtractTextPlugin({
            filename: '[name].css',
            allChunks: true
        }),
        new VueLoaderPlugin()
    ]

在app.vue中导入router

<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        
    }
</script>

运行 npm run dev 就可以访问多个页面

http://localhost:8080/index

http://localhost:8080/about

13.3路由匹配

在main.js中添加

const Routers = [
    // 
    {
        path: '/user/:id',
        meta: {
            title: '个人主页'
        },
        component: (resolve) => require(['./views/user.vue'], resolve)
    }
];

views 底下添加user.app

<template>
    <div>{{ $route.params.id }}</div>
</template>
<script>
    export default {
        mounted () {
            console.log(this.$route);
        }
    }
</script>

在浏览器输入 http://localhost:8080/user/6666 即即可访问带参数的页面；

13.4 路由跳转

方式一

index.vue 中添加跳转配置<router-link>, 其会被渲染为a标签; to 是一个 props ；

<template>
    <div>
        <h1>首页</h1>
        <router-link to="/about">跳转到 about</router-link>
    </div>
</template>
<script>
    export default {

    }
</script>

props支持的标签如下

• tag : 指定渲染的标签；<router-link to="/about" tag="li">;
• replace ： 页面无法回退；<router-link to="/about" replace>;

方式二

通过点击事件跳转

<template>
    <div>
        <h1>介绍页</h1>
        <button @click="handleRouter">跳转到 user</button>
    </div>
</template>
<script>
    export default {
        methods: {
            handleRouter () {
                this.$router.push('/user/666');
            }
        }
    }
</script>

$route其它用法

• this.$router.go(2); 后退前2页；
• this.$router.replace('/user/666'); 等同于<router-link replace>;

地址：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：经常使用在$router.push 在同一页面时，路由无法刷新的情况；

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

或者使用 2.2 中引入的 beforeRouteUpdate导航守卫：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

13.5 嵌套路由

比如 home的框架主菜单下有多级子菜单，就需要使用子路由跳转；在children中定义子路由

{
      path: '/home',
      meta: { title: '主页' },
      component: (resolve) => require(['@/views/system/home'], resolve),
      children: [
        {
          path: '/index',
          meta: { title: '首页' },
          component: (resolve) => require(['@/views/system/index'], resolve)
        }
 }       

相应的需要在home.vue中 使用 </router-view> 进行路由跳转；

<div class="home">
      <router-view></router-view>
</div>

13.6 路由重定向

访问 a 时将重定向到路由b；

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

路由别名

访问 b 时 实际上访问的是路由a，但显示的时候还是 b

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

13.7 修改标题

原生的js中使用 window . document.title 修改页面标题，vu-router中使用导航钩子(beforeEach,afterEach)在路由即将改变前后触发；

main.修改内容如下

在每个path前面添加meta信息；

   {
        path: '/user/:id',
        meta: {
            title: '个人主页'
        },
        component: (resolve) => require(['./views/user.vue'], resolve)
    }

添加导航钩子函数信息；

router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title;
    next();
});
// 跳转页面后滚动条返回顶部
router.afterEach((to, from, next) => {
    window.scrollTo(0, 0);
});

• to 表示即将打开的路由对象；
• from 表示即将离开的路由对象；
• next 表示调用该方法后才能进入下一个钩子函数,即放行；

登陆判定跳转示例：

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