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>