Problems with the use of vue2.0 routing

Install

npm install vue-router// 注意，未指定版本

introduce

in main.js

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'



Vue.config.productionTip = false

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

2. Create a new router/index.js under src

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
    
    
    mode: 'history',
    routes: [
        {
    
     path: '*', redirect: {
    
     name: '404' } },
        {
    
     path: '/', redirect: {
    
     name: 'home' } },
        {
    
     path: '/404', name: '404', component: resolve => require(['../views/common/404.vue'], resolve) },
        {
    
     path: '/home', name: 'home', component: resolve => require(['../views/sys/home.vue'], resolve) }
    ]
})

problems encountered

1. If the router version is not specified, an error may occur. insert image description here
This is because when installing directly, the installed router version is the latest version. Versions above 4 are suitable for vue3.0 and do not match vue2.0, so You need to downgrade the router

2. The router/index.js file can be decomposed into two, index.js and routes.js
index.js is as follows

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
    
    
  base: '/',
  mode: 'history',
  routes
});


export default router;

The routes.js file is as follows

const routes = [
  {
    
    
    path: '/',
    redirct: '/home'
  },
  {
    
    
    path: '/home',
    component: import( '@/views/home/index.vue')
  }
];

export default routes;

At this time, the following error will be reported when the route jumps to load the page.
insert image description here
Two methods can be tried to solve
it. Method 1: Use import
in routes.js

const mailDial = () => import('../view/Main/Addressbook/mail-dial');  // 声明变量引入，常见的懒加载方式
export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      component: mailDial,//或者直接写  () => import('../view/Main/Addressbook/mail-dial');  但是箭头函数可不能丢，不信你可以试试
      redirect: '/mailDial',
      ...

Method 2: use require, and then you need to add default

export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      component: require('../view/home/mailDial').default , // 后面添加 .default 属性
      redirect: '/mailDial',
      ...

Thinking: Why do you need to add a strange .default attribute after require(), and if you don’t add it, you will report an error?
Because:

webpack supports CommonJS, AMD and ES6 module packaging.
When we write components with .vue single file, ES6 syntax is used in the script tag and export default is used for default export.
require is the module import method of CommonJS, which does not support the default export of modules, so the result of the import is actually an object with a default attribute, so you need to use .default to get the actual component.
Of course, we can also use the import statement of ES6. If import is used, a variable name needs to be given, and all import statements must be placed at the beginning of the module.
On the contrary, if the CommonJS or AMD modular syntax is used in the .vue file, and the module.exports object is used to export, then there is no need to use .default to obtain when using require to import.