掌握vue-router用法和技巧
配置
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// 路由层级代码分割，生成分片(about.[hash].js)
// 当路由房问时会懒加载.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
指定路由器
// main.js
new Vue({
router,
render: h => h(App)
}).$mount('#app')
路由视图
<router-view/>
导航链接
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
路由嵌套
// router.js
{
path: "/",
component: Home,
children: [{ path: "/list", name: "list", component: List }]
}
// Home.vue
<template>
<div class="home">
<h1>首页</h1>
<router-view></router-view>
</div>
</template>
动态路由
{ path: "detail/:id", component: Detail },
<template>
<div>
<h2>商品详情</h2>
<p>{{$route.params.id}}</p>
</div>
</template>
路由守卫
全局守卫，router.js
router.beforeEach((to, from, next) => {
// 要访问/about且未登录需要去登录
if (to.meta.auth && !window.isLogin) {
if (window.confirm("请登录")) {
window.isLogin = true;
next(); // 登录成功，继续
} else {
next('/');// 放弃登录，回首页
}
} else {
next(); // 不需登录，继续
}
});
路由独享守卫
beforeEnter(to, from, next) {
// 路由内部知道自己需要认证
if (!window.isLogin) {
// ...
} else {
next();
}
},
组件内的守卫
export default {
beforeRouteEnter(to, from, next) {
//this不能用
},
beforeRouteUpdate(to, from, next) {},
beforeRouteLeave(to, from, next) {}
};
动态路由
// 异步获取路由
api.getRoutes().then(routes => {
const routeConfig = routes.map(route => mapComponent(route));
router.addRoutes(routeConfig);
})
// 映射关系
const compMap = {
'Home': () => import("./view/Home.vue")
}
// 递归替换
function mapComponent(route) {
route.component = compMap[route.component];
if(route.children) {
route.children = route.children.map(child => mapComponent(child))
}
return route
}
面包屑
// Breadcrumb.vue
watch: {
$route() {
// [{name:'home'},{name:'list'}]
console.log(this.$route.matched);
// ['home','list']
this.crumbData = this.$route.matched.map(m => m.name)
}
}
理解vue-router实现原理
1.实现插件
2.url变化监听
3.路由配置解析： {‘/’: Home}
4.实现全局组件：router-link router-view
class VueRouter {
constructor(options) {
this.$options = options;
this.routeMap = {};
// 路由响应式
this.app = new Vue({
data: {
current: "/"
}
});
}
init() {
this.bindEvents(); //监听url变化
this.createRouteMap(this.$options); //解析路由配置
this.initComponent(); // 实现两个组件
}
bindEvents() {
window.addEventListener("load", this.onHashChange.bind(this));
window.addEventListener("hashchange", this.onHashChange.bind(this));
}
onHashChange() {
this.app.current = window.location.hash.slice(1) || "/";
}
createRouteMap(options) {
options.routes.forEach(item => {
this.routeMap[item.path] = item.component;
});
}
initComponent() {
// router-link,router-view
// <router-link to="">fff</router-link>
Vue.component("router-link", {
props: { to: String },
render(h) {
// h(tag, data, children)
return h("a", { attrs: { href: "#" + this.to } }, [
this.$slots.default
]);
}
});
// <router-view></router-view>
Vue.component("router-view", {
render: h => {
const comp = this.routeMap[this.app.current];
return h(comp);
}
});
}
}
VueRouter.install = function(Vue) {
// 混入
Vue.mixin({
beforeCreate() {
// this是Vue实例
if (this.$options.router) {
// 仅在根组件执行一次
Vue.prototype.$router = this.$options.router;
this.$options.router.init();
}
}
});
};
掌握vuex理念和核心用法
整合vuex
vue add vuex
状态和状态变更
export default new Vuex.Store({
state: { count:0 },
mutations: {
increment(state, n = 1) {
state.count += n;
}
}
})
使用状态，vuex/index.vue
<template>
<div>
<div>冲啊，手榴弹扔了{{$store.state.count}}个</div>
<button @click="add">扔一个</button>
</div>
</template>
<script>
export default {
methods: {
add() {
this.$store.commit("increment");
}
}
};
</script>
派生状态 - getters
export default new Vuex.Store({
getters: {
score(state) {
return `共扔出：${state.count}`
}
}
})
登录状态文字，App.vue
<span>{{$store.getters.score}}</span>
动作 - actions
export default new Vuex.Store({
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit("increment", 2);
}, 1000);
}
}
})
使用actions：
<template>
<div id="app">
<div>冲啊，手榴弹扔了{{$store.state.count}}个</div>
<button @click="addAsync">蓄力扔俩</button>
</div>
</template>
<script>
export default {
methods: {
addAsync() {
this.$store.dispatch("incrementAsync");
}
};
</script>
模块化
const count = {
namespaced: true,
// ...
};
export default new Vuex.Store({
modules: {a: count}
});
使用变化，components/vuex/module.vue
<template>
<div id="app">
<div>冲啊，手榴弹扔了{{$store.state.a.count}}个</div>
<p>{{$store.getters['a/score']}}</p>
<button @click="add">扔一个</button>
<button @click="addAsync">蓄力扔俩</button>
</div>
</template>
<script>
export default {
methods: {
add() {
this.$store.commit("a/increment");
},
addAsync() {
this.$store.dispatch("a/incrementAsync");
}
}
};
</script>
vuex原理解析
vuex也是一个插件
实现四个东西：state/mutations/actions/getters
创建Store
数据响应式
let Vue;
function install(_Vue) {
Vue = _Vue;
// 这样store执行的时候，就有了Vue，不用import
// 这也是为啥Vue.use必须在新建store之前
Vue.mixin({
beforeCreate() {
// 这样才能获取到传递进来的store
// 只有root元素才有store，所以判断一下
if (this.$options.store) {
Vue.prototype.$store = this.$options.store;
}
}
});
}
class Store {
constructor(options = {}) {
this.state = new Vue({
data: options.state
});
this.mutations = options.mutations || {};
this.actions = options.actions;
options.getters && this.handleGetters(options.getters);
}
// 注意这里用箭头函数形式，后面actions实现时会有作用
commit = (type, arg) => {
this.mutations[type](this.state, arg);
};
dispatch(type, arg) {
this.actions[type](
{
commit: this.commit,
state: this.state
},
arg
);
}
handleGetters(getters) {
this.getters = {}; // 定义this.getters
// 遍历getters选项，为this.getters定义property
// 属性名就是选项中的key，只需定义get函数保证其只读性
Object.keys(getters).forEach(key => {
// 这样这些属性都是只读的
Object.defineProperty(this.getters, key, {
get: () => { // 注意依然是箭头函数
return getters[key](this.state);
}
});
});
}
}
export default { Store, install };
