Steps to use the original Vue-router
- First introduce in 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;
- Mount on the Vue instance
//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')
- use in the page
//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>
From the above, to implement a vue-router, first implement two components router-link and router-view
- Implement plug-in installation
Plug-in installation needs to implement the install method - The global registration components router-link and router-view
are registered using Vue.component - Realize routing changes to update the page
By monitoring the changes of the current routing and comparing with the set routing mapping table, the corresponding page components are filtered out, and the rendered
code is as follows
//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