vue3如何添加新的页面组件

要添加新页面组件，可以按照以下步骤：

1. 在 src/views 目录下创建一个新的 Vue 组件，例如 MyNewPage.vue。

2. 在路由中添加该页面的路由信息。在 src/router/index.js 中，可以通过以下方式添加新的路由信息：

import MyNewPage from '@/views/MyNewPage.vue'

const routes = [
  {
    path: '/my-new-page',
    name: 'MyNewPage',
    component: MyNewPage
  },
  // 其他路由信息
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3. 在需要跳转到该页面的地方使用 router-link 或编程式导航来跳转。

例如，在导航栏中添加一个链接到 MyNewPage：

<router-link to="/my-new-page">My New Page</router-link>

或者在代码中使用 `$router.push`：

this.$router.push('/my-new-page')

相关问题

vue3添加404页面

要添加404页面，可以在Vue3中使用Vue Router，具体步骤如下：

1. 在路由配置文件中定义一个名为“NotFound”的路由：

const routes = [
  // 其他路由配置
  {
    path: '/:catchAll(.*)',
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue')
  }
]

2. 在项目中创建一个名为“NotFound.vue”的组件，用于显示404页面的内容。

3. 在App.vue中使用<router-view />标签来显示路由组件，当路由匹配不到任何路由时，就会显示NotFound组件。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

4. 在NotFound组件中添加404页面的内容。

这样就可以在Vue3中添加404页面了。

vue3组件页面怎么写

在 Vue3 中编写组件页面需要使用 Composition API，下面是一个示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      title: 'Hello, Vue3!',
      content: 'This is a demo for Vue3 component.'
    });

    return {
      title: state.title,
      content: state.content
    };
  }
}
</script>

在这个示例中，我们使用了 `reactive` 函数创建一个响应式对象 `state`，然后在 `setup` 函数中返回一个包含 `title` 和 `content` 的对象，这样就可以在模板中使用它们了。需要注意的是，在 Vue3 中，组件页面必须使用 `setup` 函数来替代 Vue2 中的 `data` 和 `computed` 等选项。