Vue扣提供了插件机制,可以在全局添加 些功能。它们可以简单到几个方法、属性,也可以
很复杂,比如 整套组件库。本章将介绍几个官方的核心插件,然后通过实战来开发 个插件
注册插件需要 个公开的方法 install ,它的第 个参数是 Vue 构造器,第 参数是一个可选
的选项对象。示例代码如下:
MyPlugin.install = function (Vue,options){
//全局注册组件
Vue.component('component-name',{
//组件内容
})
//添加实例方法
Vue.prototype.$Notice = function(){
//逻辑
}
//添加全局方法或属性
Vue.globalMethod = function(){
//逻辑
}
……
}
通过Vue.ues()来使用插件:
Vue.use(MyPlugin)
//或
Vue.use(MyPlugin,{
//参数
11.1 前段路由与vue-router
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文件
<div>{{$route.params.id}}</div>
11.1.3 跳转
vue-router有两种跳转页面方法,第一种使用内置的组件,它会被渲染为标签:
<div>
<h1>首页</h1>
<router-link to="/about">跳转about</router-link>
</div>
它的用法与一般的组件一样, to 是一个prop ,指定需要跳转的路径,当然也可以用v-bind 动态设置。使用< router-link>,在HTML5 的History 模式下会拦截点击,避免浏览器重新加载页面。
< router-link>还有其他的一些prop , 常用的有:
Tag:tag指定渲染成什么标签,比如渲染的结果就是
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)
}