Vue3.0—vite—router配置

1、安装router 路由

npm install vue-router@next --save

2、新建路由配置文件,
再src文件夹下面新建router文件夹，再router文件夹下面新建index.js文件，代码如下

import {createRouter, createWebHashHistory} from 'vue-router';

// 路由列表
const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('../views/home/home.vue')
    },
    {
        path: '/list',
        name: 'list',
        component: () => import('../views/list/list.vue')
    }
]

// 导出路由
export default  createRouter({
    history: createWebHashHistory(),
    routes
})

3、新建路由页面
再src文件夹下，新建views文件夹，再views下新建home和list文件夹，分别新建home.vue和list.vue

4、再main.ts 里面加载 路由配置文件

import { createApp } from 'vue'
import App from './App.vue'

import router from './router/index.js'

const app = createApp(App)
app.use(router)
app.mount('#app')

5、在App.vue 中 调用 路由

<script setup lang="ts">

</script>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>