vue3+ts----把首页定位到自己定义的home页面而不是默认的app.vue页

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中进行页面编写了。