nuxt使用elementui搭建项目(四)：nuxt自定义路由

1.在根目录下新建router/index.js

// router/index.js
// 引入path
import path from 'path'

// 要使用 process.cwd()
const resolve = (pagePath) => path.resolve(process.cwd(), `./${pagePath}`)

export const $routes=[
  {
    path:'/',
    redirect:'/login'
  },
  {
    path:'/login',
    name:'Login',
    component: resolve('pages/User/Login/index')
  }
]
const extendRoutes =(routes)=>{
  routes.length =0;
  routes.push(...$routes)
}
export  default {
  base:'/shop',//基础路由
  extendRoutes
}

2。nuxt.config.js中配置

import router from './router'
export default{
    ...,
    router,
    ...
}

3.配置路由守卫，在plugins中新建router.js

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false });

import Vue from 'vue';
import VueRouter from 'vue-router';
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);
  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);
  return originalReplace.call(this, location).catch(err => err);
};

export default ({app})=>{
  app.router.beforeEach((to,from,next)=>{
    NProgress.start();
    next()
  })
  app.router.afterEach((to,from)=>{
    NProgress.done();
  })
}