VUE路由文件配置

首先：安装路由 ：npm install vue-router@4  

1、引入createRouter函数

main.ts文件

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
//引入createRouter函数
import { createApp, Directive } from 'vue';
import './style.css';
import App from './App.vue';
import Login from '../view/login/login.vue'

//使用router保存路由实例定义路由规则
const router = createRouter(
    {
       history: createWebHistory(),
       routes:[//在routes属性的数组中定义路由
            {path: '/login',component:Login },
       ]
    }
);

//App使用router规则
createApp(App).use(router).use(i18n).mount('#app');

2、路由页面渲染使用

<template>
    <div class="common-layout">
         <router-view />
         <!-- router-view为显示组件的地方 -->
    </div>
</template>

3、路由相关配置与main.ts文件的分离

新建一个index.ts文件

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

//定义routes抽出来单独作为一个变量再使用
const routes: Array<RouteRecordRaw> = [
    {
        path: '/login',
        name: 'login',
        component: () => import('../view/login/login.vue'),
        //懒加载，用户访问页面后加载
    },
];

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

export default router;
//导出router

分离后的main.ts文件

import { createApp, Directive } from 'vue';
import './style.css';
import App from './App.vue';
import router from './router/index';

//App使用router规则
createApp(App).use(router).use(i18n).mount('#app');