vue 第十一章插件

最新推荐文章于 2025-06-19 00:10:43 发布

原创最新推荐文章于 2025-06-19 00:10:43 发布 · 252 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

10 篇文章

订阅专栏

Vue提供了插件机制，可以在全局添加一些功能。它们可以简单到几个方法、属性，也可以很复杂，比如一整套组件库。

注册插件需要一个公开的方法install ，它的第一个参数是Vue 构造器，第二个参数是一个可选的选项对象。示例代码如下：

Myplugin.install = function(Vue,option){
     //全局注册组件
	Vue.component('component-name',{
		//组件内容
	});
	//添加方法
	Vue.prototype.$Notice = function(){};
	//添加全局方法或属性
	Vue.globalMethod = function(){};
	//添加全局混合
	Vue.mixin({
		mounted:function(){}
	})
}

通过Vue.ues()来使用插件：

Vue.use(myPlugin)

Vue.use(myPlugin,{
	//参数
})

开发插件主要是通过NPM 发布后给别人使用的，在自己的项目中可以直接在入口调用以上的方法，无须多一步注册和使用的步骤。

11.1 前端路由与vue-router

前端路由有两种，一种是通过锚点(#),JS通过hashChange事件监听url的改变（IE7或以下需要使用轮询），另一种是通过H5的History模式，使用"/"分隔没有#，但是页面没有进行跳转。后一种方式需要服务端支持，服务端接到请求后都指向同一个html文件。SPA只有一个html，整个网站的内容都在这一个html中，通过JS处理页面的变化。

前端路由的优点有很多，比如页面持久性，像大部分音乐网站，你都可以在播放歌曲的同时跳转到别的页面，而音乐没有中断。再比如前后端彻底分离。前端路由的框架通用的有Director，不过更多还是结合具体框架来用

Vue提供了vue-router插件来实现前端路由的功能。

npm install --save vue-router

在main.js中引入插件

import VueRouter from 'vue-router';

Vue.use(VueRouter);

然后在main.js中配置路由信息。创建一个数组保存路由列表，每一个路由对应一个组件。

const Routers = [{
		path:'/index',
		component: (resolve) => require(['./views/index.vue'],resolve)
	},{
		path:'/test',
		component:(resolve) => require(['./views/test.vue'],resolve)
}]

以上的写法是异步实现的懒加载（按需加载），这样可以不用在打开首页就加载所有页面的内容。webpack会把所有路由打包为一个JS文件。如果想要一次性加载，可以修改component的内容。

{

       path:'/index',

       component:require('./views/about.vue')

}

配置完路由表后，需要创建路由实例，并设置路由相关的配置。

const RouterConfig = {

       //使用html5的history路由模式

       mode:'history',

       routes:Routers

}；

const router = new VueRouter(RouterConfig);

new Vue({

       el:'#app',

       router:router,

       render:h => {

              return h(App)

       }

});

在RouterConfig里，设置mode为history会开启html5的history模式，通过”/”设置。如果不配置mode,就会使用“”#”设置路径。

路由列表的path可以带参数，比如/user/123456，其中用户id“”123456“是动态的，但他们路由到同一个页面，配置如下：

const Routers = [

       //...

       {

              path:'/uesr/:id',

              component:(resolve) => require(['./views/user.vue'],resolve)

       },

       {

              path:'',

              redirect:'/index'

       }

];

//在router/views目录，新建user.vue文件

<template>

       <div>{{$route.params.id}}</div>

</template>

<script>

       export default {

              mounted(){

                     console.log(this.$router.params.id);

              }

       }

</script>

11.1.3 跳转

vue-router有两种跳转页面方法，第一种使用内置的<router-link>组件，它会被渲染为<a>标签：

<template>

       <div>

              <h1>首页</h1>

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

       </div>

</template>

它的用法与一般的组件一样， to 是一个prop ，指定需要跳转的路径，当然也可以用v-bind 动态设置。使用＜ router-link＞，在HTML5 的History 模式下会拦截点击，避免浏览器重新加载页面。

< router-link＞还有其他的一些prop ，常用的有：

Tag：tag指定渲染成什么标签，比如<router-link to=”/about” tag=”li”>渲染的结果就是<li>而不是<a>.

Replace:使用replace不会留下history记录。导航后不能用后退键返回上一个页面。

Active-link:路由匹配成功时会自动给当前元素设置一个名为router-link-active的class,设置prop：active-class可以修改默认的名称。

export default{

       methods:{

              handleRouter(){

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

              }

       }

}

$router还有其他方法，比如replace、go.

Vue-router提供了导航钩子beforeEach和afterEach,它们会在路由即将发生改变前和改变后出发，所有当单页面应用切换标题时可以设置再beforeEach钩子完成。

const router = new VueRouter(RouterConfig);

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

       window.document.title = to.meta.title;

       next();

});

导航钩子有3个参数：

To:目标导航对象；

From:即将离开的路由对象；

Next:调用该方法后，才能进入下一个钩子。

当有需求是，一个页面较长滚动到某个位置，在跳转到另一个页面，滚动条默认上一次停留的位置，而好的体验是返回顶部，通过钩子afterEach实现。

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

       window.scrollTo(0,0);

});

11.2 状态管理与Vuex

Vuex用于解决跨组件共享数据的需求，用来同意管理组件状态，它定义了一系列规范来使用和操作数据，使组件应用更加高效。当然，如果项目不是很复杂，需要认真考虑是否有必要使用vuex。

11.2.2 Vuex基本用法

通过npm安装vuex：

npm install –save vuex

new Vue({

       el:'#app',

       router:router,

       //使用vuex

       store:store,

       render:h=>{

              return h(App)

       }

});

仓库store包含了应用数据和操作过程。Vuex的数据都是响应式的，任何组件使用同一store的数据时，只要store数据变化，对应的组件也会立即更新。

11.2.3高级用法

Vuex还有其他3个选项可以使用：getters、actions、modules。

Getters使用场景为当有多个组件有相同运算或者取值方法时使用。

mutations 、actions 看起来很相似，可能会觉得不知道该用哪个，但是Vuex 很像是一种与开发者的约定，所以涉及改变数据的，就使用mutations ，存在业务逻辑的，就用actions 。至于将业务逻辑放在action 里还是Vue 组件里完成，就需要根据实际场景拿捏了。

最后一个选项是modules ，它用来将store 分割到不同模块。当你的项目足够大时， store 里的state 、getters 、mutations 、actions 会非常多，都放在rnain.js 里显得不是很友好，使用modules 可以把它们写到不同的文件中。每个module 拥有自己的state 、getters 、mutations 、actions ，而且可以多层嵌套。