vue-router動態註冊路由，實現無需註冊頁面可跳轉
阿新 • • 發佈：2019-01-13
- demo工程地址：https://github.com/martSforever/test-router
- 先說一下特性：
- 無需註冊頁面路由，可直接跳轉；
- 頁面地址可以在資料庫中配置；
- 頁面分包載入，進行頁面路由跳轉的時候才去載入頁面元件程式碼；
- 可配置頁面快取或者不快取
- 老樣紙，先看效果圖
- 原理說明：
- 首先是分包載入，當我們根據頁面地址進行跳轉的時候，首先根據這個頁面地址去載入頁面
import('src/page' + path + '-page.vue').then(module=>console.log(module.default))
載入檔案得到的module.default就是vue元件；其中我們只對src/page目錄下的以-page.vue結尾的檔案進行分開打包以及按需引入，其他的當做頁面公共元件按需引入； - 得到component之後，動態註冊路由：
const route = {name: path, path: path, component: module.default} /*新增路由資訊*/ this.$router.options.routes.push(route) this.$router.addRoutes([route]) - 註冊完之後就可以跳轉了：
this.$router.push({path, query})
- 首先是分包載入，當我們根據頁面地址進行跳轉的時候，首先根據這個頁面地址去載入頁面
- 缺點：
- 目前這個demo只能配置一級路由，如果需要更多更復雜的配置多級路由等，請自行完善；
核心程式碼main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)
const router = new VueRouter({routes: []})
Vue.config.productionTip = false
Vue.prototype.$lv = {
$router: 核心頁面App.vue
<template>
<div id="app">
<div class="header">
<!--這裡可以理解為從後臺資料庫中配置的選單地址，無需註冊-->
<button @click="$lv.go('/student/student',{name:'hello world'})">開啟學生頁面</button>
<button @click="$lv.go('/student/student-detail')">開啟學生詳情頁面</button>
<button @click="$lv.go('/teacher/teacher')">開啟老師頁面</button>
</div>
<div class="page">
<!--頁面不快取（路由跳轉之後會銷燬頁面vue例項，重新跳轉回此路由會重新初始化頁面）-->
<router-view></router-view>
<!--頁面快取（路由跳轉，切換回來的時候頁面仍然沒有變化）-->
<!--<keep-alive>
<router-view></router-view>
</keep-alive>-->
</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
}
</script>
<style>
#app {
}
.page {
height: 100px;
background-color: #f2f2f2;
}
</style>
工程目錄結構:
頁面懶載入效果圖:
