vue3使用路由构建项目

安装路由,安装最新版本

npm i vue-router

构建项目目录

router/index.js文件内容

import { createRouter,createWebHistory } from "vue-router";
import Home from "@/components/Home.vue";
import News from "@/components/News.vue";
import About from "@/components/About.vue";

const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News
        },
        {
            path:'/about',
            component:About
        }
    ]
})

export default router

main.js内容：

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

const app = createApp(App)

//引入路由
import router from "./router"
app.use(router)

//挂载到容器
app.mount('#app')

App.vue根组件内容：

<script setup>
  import { RouterView,RouterLink } from 'vue-router';
</script>

<template>
  <RouterLink class="router" to="/home" active-class="active">首页</RouterLink> 
  <RouterLink class="router" to="/news" active-class="active">新闻</RouterLink> 
  <RouterLink class="router" to="/about" active-class="active">关于</RouterLink>
  <div>
    <RouterView></RouterView>
  </div>
</template>

<style scoped>
 .active{
    font-weight: bold;
 }
 .router{
    margin-right: 10px;
 }
 
</style>

components/Home.vue内容（其他组件略）：

<template>
  <div>这是首页</div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
</style>

注意：路由文件创建后需要在main.js中引入，用use方式注册。App.vue需要引入路由视图相关模块。