vue-router封装结构

标签：vue 封装 Vue location VueRouter import router

index.js 文件

import Vue from 'vue'
import VueRouter from "vue-router"
import routes from './routes'
 
Vue.use(VueRouter)
 
// 解決编程式路由住同一地址跳转时会报错的恃观
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
    if (onResolve || onReject) {
        return originalPush.call(this, location, onResolve, onReject)
    } else {
        return originalPush.call(this, location).catch(err => err)
    }
}
// replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
    if (onResolve || onReject) {
        return originalReplace.call(this, location, onResolve, onReject)
    } else {
        return originalReplace.call(this, location).catch(err => err)
    }
}
const router = new VueRouter({
    routes
})
export default router;

　　router文件

// 定义路由路径 const routes = [     {         path: '/Main',         component: () => import('@/views/Main.vue'), 　　//子路由设置         children: [             {                 path: '/Home',                 component: () => import('@/views/Home.vue')             },             {                 path: '/Main',                 component: () => import('@/views/Main.vue')             },         ]     },     // 例     // {     //     path: '/Usre',     //     component: () => import('@/views/Usre.vue')     // },     // 重定向     {         path: '/',         redirect: '/Main'     } ]
export default routes;

　　在main.js 文件挂载

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from "./router/index.js";    //引入

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,   //挂载
  render: h => h(App),
}).$mount('#app')

　　

标签：vue,封装,Vue,location,VueRouter,import,router
From： https://www.cnblogs.com/yugueilou/p/16960247.html