vue-router
安装vue-router
vue add router
项目目录
核心步骤
1.vue 使用VueRouter, 创建路由表 krouter/index
Vue.use(KVueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},...]
const router = new KVueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes
})
export default router
2.根节点挂载router
import router from './krouter'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
3.app.vue中添加数据视图
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
link的to属性改变,页面不进行刷新,但是视图进行响应。
Vue-router源码
1.根据浏览器路由进行视图响应,但浏览器不刷新。(SPA)
路由的切换有两种 hash与history,这里实现的时候是监听浏览器的hashchange事件,然后通知router-view进行视图的切换
- 利用vue的响应式原理
- 制造一个响应式数据表示当前URL在,在router-view的render函数中使用它。
因此要实现一个VueRouter插件,该插件有install方法,并注册两个全局组件。
router-link 与router-view
// 降低耦合, 做一个引用关系,就不必把vue打包进去
let KVue
// 插件
// 实现 KVueRouter 类
// 实现一个install方法
class KVueRouter{
constructor (options){
KVue;
this.$options = options;
// 缓存路由关系
this.routeMap = {};
this.$options.routes.forEach((route)=>{
this.routeMap[route.path] = route
})
// KVue.util.defineReactive 实现数据响应
const initial = window.location.hash.slice(1)|| '/'
KVue.util.defineReactive(this, 'current', initial)
// this.current = '/'
window.addEventListener('hashchange', this.onHashChange.bind(this))
window.addEventListener('load', this.onHashChange.bind(this))
}
onHashChange(){
this.current = window.location.hash.slice(1)
}
}
// 形参是vue 的构造函数
KVueRouter.install =function (Vue) {
KVue = Vue
// 1.挂载$router
Vue.mixin({
beforeCreate(){
// 全局混入,将来在组件实例化的时候才执行
//此时 router实例就存在了
// this 指的是组件实例、
//只在根实例上挂载 $router
if(this.$options.router){
// 挂载
Vue.prototype.$router = this.$options.router;
}
}
})
// 2.实现两个全局组件
Vue.component('router-link', {
props: {
to: {
type: String,
require: true,
default: ''
},
},
render(h){
// a标签 <a href= to>link 就是$slots.default</a>
return h(
'a',
{
attrs:{
href: '#'+this.to
}
},
this.$slots.default
)
}
})
Vue.component('router-view', {
// 获取路由实例
// 需要获取路由表表 routes
render(h){
// const routes = this.$router.$options.routes;
const current = this.$router.current;
const route= this.$router.routeMap[current]
const comp = route? route.component: null
return h(comp)
}
})
}
export default KVueRouter