1、安装router
npm install vue-router@4
2、创建router对应的ts文件
路径(参考大部分人都是这么创建的):src/router/index.ts
对应的component要根据自己的路径创建好
ts内容根据自己项目自定义,我自己的是这么写的
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
{
path: '/login',
name: 'login',
component: () => import('../view/login/index.vue')
},
{
path: '/home',
name: 'home',
component: () => import('../view/home/index.vue')
},
{
path: '/',
name: 'layout',
component: () => import('../view/layout/index.vue')
},
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
3、使用router
在main.ts引入:
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).mount('#app')
在App.vue使用:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script setup lang="ts">
import {RouterView} from 'vue-router'
</script>
<style scoped>
</style>
4、页面尝试访问: