1. Install the router plug-innpm install vue-router@4
or yarn add vue-router@4
2. Create a new router folder and index.js in the router: it mainly configures routing
import {createRouter,createWebHashHistory} from 'vue-router'
// 1.新的页面导入进来
import Home from '../view/Home.vue'
import Login from '../view/Login.vue'
// 2.写路由的地方
const routes = [
{
path:'/',
name:'home',
component:Home
},
{
path:'/login',
name:'login',
component:Login,
}
];
const router = createRouter({
// 3.内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
export default router;
3. In the main.js page, import routing and mount routing.
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 导入路由
import router from './router/index'
//创建并挂载根实例
const app =createApp(App)
app.use(router)
// 挂载根应用
app.mount('#app')
4. Test it to see if the routing is configured successfully. Just create a page and write something in it.
这是Home页面
<template>
<h1>用户页面</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
5. The last step and the most critical step is to use it on the app page<router-view></router-view>
to display the effect of the sub-component
renderings