基本切换效果

• Vue3中要使用vue-router的最新版本，目前是4版本。

• 路由配置文件代码如下：

import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'

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

• main.ts代码如下：

import router from './router/index'
app.use(router)

app.mount('#app')

• App.vue代码如下

<template>
<div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
    <RouterLink to="/home" active-class="active">首页</RouterLink>
    <RouterLink to="/news" active-class="active">新闻</RouterLink>
    <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
    <RouterView></RouterView>
    </div>
</div>
</template>

<script lang="ts" setup name="App">
import {RouterLink,RouterView} from 'vue-router'  
</script>

---

4两个注意点

1. 路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。

2. 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。