vue create my-project-name
安装组件
npm install vue-router@4
配置路由规则、路由模式
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
// 配置路由规则
const routes = [
{ path: '/', component: Home },
]
// 创建router,使用HTML5 history模式,并且基路径'base'
const router = createRouter({
history: createWebHistory('base'),
routes: routes
})
// 使用router
createApp(App).use(router).mount('#app')
设置路由视图
<template>
<!-- 路由视图 -->
<router-view></router-view>
</template>
<script lang="ts">
import { Vue } from 'vue-class-component'
export default class App extends Vue {}
</script>