Create a simple vue project using vue scaffolding and vue routing

1. Complete the creation of vue scaffolding, the specific creation method can be viewed in my vue cli document

Vue CLI ------ Scaffolding_QiQi613's Blog-CSDN Blog

2. Install routing npm i [email protected]

After the installation is complete, it will be displayed in the package.json file

If the vue version is 2.6.10, the routing version must download the specified 3.4.9, otherwise there may be compatibility issues that make it unusable

 3. Create a router folder in the src folder

Click src-----right-click-----click new-----click directory--enter "router"--enter----folder creation is complete

4. Create a new index.js file in the created router folder

Click router-----right-click-----click New-----click 5js file--input "index"----enter----file creation is complete

 5. Copy the following code into the newly created index.js file

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login.vue'
Vue.use(Router)
 
const router = new Router({
	// mode: 'history',
	routes: [{
			path: '/',
			redirect: '/login'
		},
		{
			path: '/login',
			component: Login
		}
	]
})
export default router
 

6. Paste the following code in the Main.js file in the src folder (delete the original code)

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')

7. Paste the following code in the App.vue file in the src folder (delete the original code) 8.

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

8. Create a vue file matching the route in the components folder under the src folder (create a vue file) 

I created two vue files and added content to the files, as shown in the figure

<template>
	<div id="apps">
		<!-- <router-link to="/home">登录</router-link> -->
		<router-link to="/home">User</router-link>
	</div>
</template>

<script>
</script>

<style>
</style>

9. Import the created vue file into the index.js file

This is how I imported it

 10. Start the project -------- done

Tired to death, from now on, 520 and 521 are my nightmare o(╥﹏╥)o