vue3+ts----把首页定位到自己定义的home页面而不是默认的app.vue页
在 Vue Router 中可以通过配置默认路由来实现直接访问 Home 页面的效果。
1.在配置的路由页面如下进行如下设置:
import {
createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
我们使用了 createWebHistory 来创建路由的 history 模式,然后定义了一个默认路由,指向 Home 组件。这样当用户访问应用程序根路径时,就会默认展示 Home 组件。
2.在app.vue中需要在模板中使用 组件来渲染当前路由对应的组件。
<template>
<div>
<router-view></router-view>
</div>
</template>
上述步骤就可以在home.vue中进行页面编写了。