VVT项目第二步：配置路由

配置全局路由

第一步：安装插件。

npm install vue-router@4
Vue Router 中文文档地址
（链接如果失效就自行搜索官网）

第二步：配置相关文件和项目引入。

• 1、在src目录下创建一个新的文件夹，命名为router。
• 2、在router文件夹中，创建一个新的TS文件，命名为index.ts，并编写以下代码：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../layout/home.vue';

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    // 添加其他路由
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

• 3、在src目录下创建一个新的文件夹，命名为layout。
• 4、在layout文件夹中，创建一个新的VUE文件，命名为home.vue，并编写以下代码：

<template>
    <h1>VVT-WEB</h1>
</template>

<script>
</script>

<style>
</style>

• 5、在src目录下找到main.ts，引入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')

• 7、在src目录下找到App.vue，加上路由展示标签<router-view></router-view>。
  App.vue

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

如果顺利的话，你会得到一个这样的项目：

image.png