标签：from 展示 location 响应式 struct required 一个 fine slots
一、vue-router
vue-router是vue.js的官方路由管理器。可以方便构建单页应用。
二、vue-router使用
1.安装 vue add router
2.router.js
* 使用vue-router插件
import VueRouter from‘vue-router‘
Vue.use(VueRouter)
* 创建VueRouter实例
const router = new VueRouter({ // ... }) export default router
3.main.js（添加VueRouter实例）
import router from‘./router‘ new Vue({ router, // ... }).$mount("#app");
4.vue文件添加路由视图
<router-view></router-view>
三、实现思路
1.作为插件需要实现install方法
2.实现router-view用于展示组件内容，router-link用于跳转
3.监听hashchange或popstate事件
4.需要一个响应式属性current，改变时获取对应组件展示
四、源码实现
1.Vue.js要求插件有一个公开方法 install。这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选择对象。
*install方法中可做处理
let Vue; class VueRouter { constructor(options) { this.$options = options } } // 执行install方法时，会把Vue传进来 VueRouter.install = function(_Vue, options) { // 保存构造函数在tvue-router中使用 // this是指VueRouter构造器 Vue = _Vue // 挂载$router（通过mixin混入生命周期处理） Vue.mixin({ beforeCreate() { // this指Vue构造器 // 确保根实例的时候才执行 if (this.$options.router) { Vue.prototype.$router = this.$options.router } } }) } export default VueRouter
2.实现router-link和router-view
*实现router-link
// install方法中声明组件 Vue.component(‘router-link‘, { props: { to: { type: String, required: true } }, render(h) { // 运行时环境只能使用render函数 return h(‘a‘, {attrs: {href: ‘#‘ + this.to}}, this.$slots.default) } })
*VueRouter监控url变化对应展示不同组件
class VueRouter { constructor(options) { this.$options = options // 缓存路由信息 this.routeMap = {} this.$options.routes.forEach(route=>{this.routeMap[route.path] = route}) Vue.util.defineReactive(this, ‘current‘, ‘/‘) // 监听url变化 window.addEventListener(‘hashchange‘, this.onHashChange.bind(this)) window.addEventListener(‘load‘, this.onHashChange.bind(this)) } onHashChange() { this.current = window.location.hash.slice(1) } } // install方法混入 Vue.component(‘router-view‘, { render(h) { const {routeMap,current} = this.$router const component = routeMap[current].component return h(component) } })
标签：from 展示 location 响应式 struct required 一个 fine slots
原文地址：https://www.cnblogs.com/zhaojingj/p/13024109.html
