原版Vue-router的使用步骤
- 先在router/index.js引入
//router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeComponent from "../components/home.vue"
import AboultComponent from "../components/about.vue"
//第一步
Vue.use(VueRouter)
const routes=[
{
path:'/',
name:"Home",
component:HomeComponent
},
{
path:'/aboult',
name:"Aboult",
component:AboultComponent
}
]
//实例化router
const router = new VueRouter({
routes
})
//导出
export default router;
- 挂载到Vue实例上
//main.js
import Vue from 'vue'
import App from './App.vue'
import router from "./router/index.js"
Vue.config.productionTip = false
//挂载到Vue
new Vue({
render: h => h(App),
router
}).$mount('#app')
- 在页面中使用
//App.vue
<template>
<div id="app">
<router-link to="/">Home</router-link>|<router-link to="/aboult">Aboult</router-link>
<router-view></router-view>
</div>
</template>
<script>
由上,要实现个vue-router,首先要实现router-link和router-view两个组件
- 实现插件安装
插件安装要实现install方法 - 全局注册组件router-link和router-view
使用Vue.component注册 - 实现路由变化更新页面
通过监听当前路由的变化,和设置的路由映射表对比,筛选出对应的页面组件,渲染出来
代码如下
//hvue-router
let Vue;
class VueRouter {
constructor(options) {
this.$options=options
// 定义响应式数据current,保存当前的路由hash值
Vue.util.defineReactive(this,'current',window.location.hash.substring(1)||'/')
// 监听hash变化
window.addEventListener('hashchange',()=>{
this.current=window.location.hash.substring(1)
})
}
}
//1、挂载$router,
// 插件要实现install方法,此方法在Vue.use()时候调用
VueRouter.install = function(_vue) {
Vue = _vue;
// 挂载$router,要拿到router的实例,但在Vue.use(),执行时候router实例还没有初始化,所以此处使用全局混入
Vue.mixin({
beforeCreate() {
//只有根实例才有this.$options.router new Vue({render: h => h(App),router}).$mount('#app')
if (this.$options.router) {
Vue.prototype.$router = this.$options.router
}
}
})
//2、全局注册router-link router-view两个组件
Vue.component('router-link', {
props:{
to:{
type:String,
required:true
}
},
render(h){
return h('a',{attrs:{href:'#'+this.to}},this.$slots.default)
}
})
Vue.component('router-view', {
render(h){
let component=null
//this.$router为当前Rouetr的实例
// 根据路由映射表( this.$router.$options.routes)和当前路由筛选出对应的组件
const route = this.$router.$options.routes.find((route)=>route.path==this.$router.current)
if(route){
component=route.component;
}
return h(component)
}
})
}
export default VueRouter