路由基础理解
在 Vue3 生态中,官方推荐的路由解决方案是 vue-router 4。它提供了声明式的导航机制,让单页应用(SPA)的页面切换变得流畅且易于管理。
路由配置
首先需要在项目中安装依赖,然后创建一个路由配置文件。这里我们使用 createRouter 来初始化路由实例,并指定历史模式为 createWebHistory。
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
},
{
path: '/news',
component: News
}
]
})
export default router
注意这里补全了 News 组件的导入,因为后续模板中用到了 /news 路径,否则运行时会报错找不到组件。
主入口注册
路由实例创建好后,需要在应用的主入口文件中进行挂载。通常是在 main.ts 里调用 app.use(router)。
import router from './router/index'
{ createApp }
app = ()
app.(router)
app.()


