vue安装路由

一、安装命令：

　　npm install vue-router --save 或者 cnpm install vue-router --save

二、新建一个router.js

 router.js大致内容

 1 import {createRouter, createWebHistory} from 'vue-router'
 2 
 3 const routes = [
 4     {
 5         path: '/',  //主页
 6         name: 'index',
 7         component: () => import('./views/Index'),
 8         meta: {
 9             title: 'index'
10         }
11     },
12     {
13         path: '/login',  //登录
14         name: 'login',
15         component: () => import('./views/LoginView.vue'),
16         meta: {
17             title: 'login'
18         }
19     }
20 
21 ]
22 
23 const router = createRouter({
24     history: createWebHistory(process.env.BASE_URL),
25     //     base:process.env.BASE_URL,
26     routes
27 })
28 
29 router.beforeEach(async (to) => {
30     if (to.meta.title) { // 判断是否有标题
31         document.title = to.meta.title;
32     }
33 });
34 
35 export default router

三、main.js中引入路由

1 import { createApp } from 'vue'
2 import App from './App.vue'
3 import router from './router'
4 
5 const app = createApp(App);
6 app.use(router).mount('#app')

四、App.vue里直接使用路由(使用下面直接全部替换App.vue文件)

<template>
  <router-view/>
</template>

<style>

</style>

备注： router.js里对应的路径，自己在src文件夹里自己新建.vue文件即可