vue-router
Vue-router是Vue.js官方的路由管理器。
它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。
安装
vue add router
核心步骤
- 步骤一：使用
vue-router插件
//router.js
import Router from 'vue-router';
/*
* VueRouter是一个插件
* 1）实现并声明两个组件router-view router-link
* 2）install: this.$router.push()
* */
Vue.use(Router); // 引入插件
- 步骤二：创建Router实例
// router.js
export default new Router({...}) // 导出Router实例
- 步骤三：在根组件添加该实例
// main.js
import router from './router';
new Vue({
router // 添加到配置项
}).$mount("#app")
- 步骤四：添加路由视图
<!-- App.vue -->
<router-view></router-view>
- 步骤五：导航
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
this.$router.push('/');
this.$router.push('/about')
vue-router简单实现
需求分析
- 单页面应用程序中，
url发生变化时候，不能刷新，显示对应视图- hash：
#/about - History api：
/about
- hash：
- 根据
url显示对应的内容router-view- 数据响应式：
current变量持有url地址，一旦变化，动态执行render
任务
- 实现一个插件
- 实现
VueRouter类- 处理路由选项
- 监控
url变化 - 响应变化
- 实现
install方法-
$router注册 - 两个全局组件
-
- 实现
实现
创建新的插件
在Vue2.x项目中的src路径下，复制一份router文件，重命名为ou-router。
然后在ou-router路径下新建一个ou-vue-router.js文件，并将index.js文件中的VueRouter引入改为ou-vue-router.js。
import VueRouter from './ou-vue-router'
同时将main.js中的router引入也修改一下。
import router from './ou-router'
创建Vue插件
关于Vue插件的创建：
- 可以使用
function实现，也可以使用object或class实现； - 要求必须有一个
install方法，将来会被Vue.use()使用
let Vue; // 保存Vue的构造函数，插件中需要用到
class VueRouter {}
/*
* 插件：实现install方法，注册$router
* 参数1是Vue.use()一定会传入
* */
VueRouter.install = function (_Vue) {
Vue = _Vue; // 引用构造函数，VueRouter中要使用
}
export default VueRouter;
挂载$router
当我们发现vue-router引入vue的时候，第一次是在router/index.js中使用了Vue.use(Router)，在这个时候也就会调用了vue-router的install方法；而第二次则是在main.js中，创建根组件实例的时候引入router,即new Vue({router}).$mount("#app")。
也就是说，当调用vue-router的install方法的时候，项目还没有创建Vue的根组件实例。因此我们需要在vue-router的install方法使用全局混入，延迟到router创建完毕才执行挂载$router。
let Vue; // 保存Vue的构造函数，插件中需要用到
class VueRouter {}
/*
* 插件：实现install方法，注册$router
* 参数1是Vue.use()一定会传入
* */
VueRouter.install = function (_Vue) {
Vue = _Vue; // 引用构造函数，VueRouter中要使用
/* 挂载$router */
/*
* 全局混入
* 全局混入的目的是为了延迟下面逻辑到router创建完毕并且附加到选项上时才执行
* */
Vue.mixin({
beforeCreate() { // 此钩子在每个组件创建实例时都会调用
/* this.$options即创建Vue实例的第一个参数 */
if(this.$options.router){ // 只在根组件拥有router选项
Vue.prototype.$router = this.$options.router; // vm.$router
}
}
})
}
export default VueRouter;
注册全局组件router-link和router-view
首先在install方法中注册两个全局变量。
let Vue;
class VueRouter {}
VueRouter.install = function (_Vue) {
Vue = _Vue;
Vue.mixin({
...
})
/* 注册全局组件router-link和router-view */
Vue.component('router-link',{
render(createElement){
return createElement('a','router-link'); // 返回虚拟Dom
}
});
Vue.component('router-view',{
render(createElement){
return createElement('div','router-view'); // 返回虚拟Dom
}
})
}
export default VueRouter;
实现router-link
-
router-view是一个a标签 - 将
router-view的to属性设置到a标签的herf属性（先默认使用hash方法） - 获取
router-view的插槽内容，插入a标签中
Vue.component('router-link', {
props: {
to: {
type: String,
required: true
}
},
render(createElement) { // 返回虚拟Dom
return createElement('a',
{
attrs: {href: '#' + this.to} // 设置a标签的href属性
},
this.$slots.default // 获取标签插槽内容
);
}
});
实现router-view
router-view实质上根据url的变化，实时响应渲染对应的组件，而createElement函数是可以传入一个组件参数的。
因此，我们不进行渲染任何内容，后面实现监听url变化后，从映射表获取到组件后，再来实现router-view。
Vue.component('router-view', {
render(createElement) {
let component = null;
return createElement(component); // 返回虚拟Dom
}
})
监听url变化
我们在VueRouter类的constructor函数中监听url的变化，这里我们默认使用hash方式。
而且，我们需要将存入url的变量设置为响应式数据，这样子当其发生变化的时候，router-view的render函数才能够再次执行。
class VueRouter {
/*
* options:
* mode: 'hash'
* base: process.env.BASE_URL
* routes
* */
constructor(options) {
this.$options = options;
// 将current设置为响应式数据，即current变化时router-view的render函数能够再次执行
const initial = window.location.hash.slice(1) || '/';
Vue.util.defineReactive(this, 'current',initial);
// 监听hash变化
window.addEventListener('hashchange', () => {
this.current = window.location.hash.slice(1);
})
}
}
因此，我们可以来实现router-view组件。
在render函数中，this.$router指向的是VueRouter创建的实例，因此我们可以通过this.$router.$option.routes获取路由映射表，this.$router.current获取当前路由，然后通过遍历匹配获取组件。
Vue.component('router-view', {
render(createElement) {
let component = null;
// 获取当前路由对应的组件
const route = this.$router.$options.routes
.find(route => route.path === this.$router.current);
if (route) {
component = route.component;
}
return createElement(component); // 返回虚拟Dom
}
})
实现history模式
前面的实现都默认为hash模式，接下来简单实现一下history模式。
首先将监听url的代码优化一下，并判别mode的值来设置current的初始值，而history模式下初始值为window.location.pathname。
class VueRouter {
/*
* options:
* mode: 'hash'
* base: process.env.BASE_URL
* routes
* */
constructor(options) {
this.$options = options;
switch (options.mode) {
case 'hash':
this.hashModeHandle();
break;
case 'history':
this.historyModeHandle();
}
}
// Hash模式处理
hashModeHandle() {
// 将current设置为响应式数据，即current变化时router-view的render函数能够再次执行
const initial = window.location.hash.slice(1) || '/';
Vue.util.defineReactive(this, 'current', initial);
// 监听hash变化
window.addEventListener('hashchange', () => {
this.current = window.location.hash.slice(1);
})
}
// History模式处理
historyModeHandle() {
const initial = window.location.pathname || '/';
Vue.util.defineReactive(this, 'current', initial);
}
}
然后我们来实现history模式下的router-link组件。
在history模式下，当我们点击router-link时，即点下a标签时，页面会重新刷新。所以我们需要设置一下其点击事件，取消默认事件，然后通过history.pushState去修改url，然后重设current的值。
Vue.component('router-link', {
render(createElement) { // 返回虚拟Dom
const self = this;
const route = this.$router.$options.routes
.find(route => route.path === this.to);
return createElement('a',
{
attrs: {href: this.to}, // 设置a标签的href属性
on: {
click(e) {
e.preventDefault(); // 取消a标签的默认事件，即刷新页面
history.pushState({}, route.name, self.to); // 通过history.pushState来改变url
self.$router.current = self.to;
}
}
},
this.$slots.default // 获取标签插槽内容
);
}
})
最后我们将两种模式的router-link组件进行一个合并。
Vue.component('router-link', {
props: {
to: {
type: String,
required: true
}
},
render(createElement) { // 返回虚拟Dom
if(this.$router.$options.mode === 'hash'){
return createElement('a',
{
attrs: {href: '#' + this.to} // 设置a标签的href属性
},
this.$slots.default // 获取标签插槽内容
);
}else{
const self = this;
const route = this.$router.$options.routes
.find(route => route.path === this.to);
return createElement('a',
{
attrs: {href: this.to}, // 设置a标签的href属性
on: {
click(e) {
e.preventDefault(); // 取消a标签的默认事件，即刷新页面
history.pushState({}, route.name, self.to); // 通过history.pushState来改变url
self.$router.current = self.to;
}
}
},
this.$slots.default // 获取标签插槽内容
);
}
}
});
