vue-router/路由模式history和hash/路由懒加载/动态路由/路由传参

1、vue的路由默认是hash模式，修改为history，两者的区别：https://blog.csdn.net/yexudengzhidao/article/details/87689960

2、路由懒加载，把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

代码：

{

path: '/home',

name: 'home',

component: () => import('@/views/home/index')

}

或者

const home = () => import('@/views/home/index');

把component那里改成component:home就好了。

动态路由：https://www.jb51.net/article/190172.htm

在src/router/index.js中

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
import { setToken, getToken, removeToken } from "@/utils/cookies";
import { getAllPermissions, getRoles, getCurrentLoginInformations, getAllRoutes } from '@/api/user'
import NProgress from 'nprogress'
Vue.use(VueRouter)
import { asyncRoutes } from "@/utils/constData";

export const _routes = [
  {
    path: '/',
    name: 'default',
    redirect: '/login',
    meta: { title: '登录' }
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/index'),
    meta: { title: '登录' }
  },
  {
    path: '/welcome',
    name: 'welcome',
    component: () => import('@/views/welcome/index'),
    meta: { title: '欢迎使用' }
  },
  {
    path: '/404',
    name: '404',
    meta: { title: '404' },
    component: () => import('../components/404.vue'),
  },
  { path: '/', redirect: '/login' },
];

const router = new VueRouter({
  routes: _routes,
  mode: 'history',
  // 解决vue框架页面跳转有白色不可追踪色块的bug
  scrollBehavior: () => ({ x: 0, y: 0 })
});
let hasGen = false;
router.beforeEach((to, from, next) => {
  NProgress.start();
  let token = getToken();
  if (to.path === "/login") {
    if (token != '' && token != undefined) {
      next({ path: "/welcome" });
      NProgress.done();
    }
    else {
      next();
      NProgress.done();
    }
  }
  else if (to.path === "/404") {
    next();
    NProgress.done();
  }
  else {
    if (token != '' && token != undefined) {
      if (!hasGen) {
        hasGen = true;
        getAllRoutes().then((res) => {
          let ritems = res.data;
          let nroutes = [];
          for (let i = 0; i < ritems.length; i++) {
            if (asyncRoutes[ritems[i].key]) {
              nroutes.push(asyncRoutes[ritems[i].key]);
            }
          }
          router.addRoutes(nroutes);
        });
      }
      next();
      NProgress.done();
    }
    else {
      next({ path: "/login" });
      NProgress.done();
    }
  }
});

//前置钩子，导航守卫，跳转下一步之前执行
// router.beforeEach((to, from, next) => {
//   document.title = to.matched[0].meta.title;
//   next();
// });

// router.afterEach((to, from) => {

// });

export default router

constData.js

// 本地所有的页面 需要配合后台返回的数据生成页面
export const asyncRoutes = {
    system: {
        path: '/system',
        name: '系统管理',
        meta: { title: '系统管理' },
        component: () => import('@/views/system/index'),
    },
    article: {
        path: '/article',
        name: '文章管理',
        meta: { title: '文章管理' },
        component: () => import('@/views/article/index'),
    },
};

注：把基本的不需要动态生成路由写到router里；把需要动态生成的单独写到一个js文件中；后台根据登录用户的权限返回需要生成的路由的key；根据返回的key过滤出来需要的路由；使用router.addRoutes()把集合添加到路由中。

路由传值：

传参：<router-link :to="{path:'/profiledetail',query:{name:'jay.x'}}" tag='button'>详情</router-link>，this.$router.push({path: '/profiledetail', query:{name:'jay.x'}}); 获取：this.$route.query.name;

传参：<router-link :to="'/profiledetail?name=jay.x'" tag='button'>详情</router-link>，this.$router.push({name: 'profiledetail', params:{name:'jay.x'}});获取：this.$route.params.name;