foreword

Immediately after the previous article, the configuration of vue3 is different from that of vue2. This article describes how to configure it. If this article is helpful to you, please support the blogger three times.
insert image description here

下面案例可供参考

1. Configure routing (vue-router)

1. Install routing

Use the npm command to install: npm install vue-router@4
after completion, we open package.jsonthe file :
the following is success
insert image description here

2. Create a new page

Create a view directory here, then create AboutView.vue HomeView.vue two
insert image description here
, and then write some content in the two files

3. Create a routing configuration file

Create a new router directory, and then create index.js and routes.js files under the router directory

The content of the index.js file is as follows:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Configure routing in main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

//注意use要在mount之前
createApp(App).use(router).mount('#app')

Add router-view and router-link:
I add it in the App.vue file for demonstration, readers can add it according to their own situation

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

4. Special error reporting!

The worst error reported by vue: Newline required at end of file but not found eol-last
insert image description here
Solution: Check whether there is a blank line after the last line of the index.js file in the router file. If not, you need to add one.

If an error is reported: error and 0 warnings potentially fixable with the --fix option.
Because Eslint is very strict in syntax detection, it will also report errors if there are problems with indentation and spaces. We can just turn it off in vue.config.js and add this line of code: lintOnSave: false, Then run again.
insert image description here

insert image description here

Vue3 configuration routing (vue-router)

Article directory