vue3 新标签组件转跳

Question

vue3 按钮转跳到一个新的标签，并且这个标签里面是有自己的组件的，如何实现？

Answer 1

在Vue 3中，你可以使用或者router.push来实现按钮点击后跳转到一个新的页面。

1. 设置路由
   首先，确保已经配置了Vue Router并定义了相应的路由。例如，你可以在router/index.js文件中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import NewPage from '../views/NewPage.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/newpage',
    name: 'NewPage',
    component: NewPage
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

1. 创建按钮
   在组件中创建一个按钮，并使用或者router.push来实现页面跳转。

使用<router-link>

<template>
  <router-link to="/newpage">Go to New Page</router-link>
</template>

使用router.push

<template>
  <button @click="goToNewPage">Go to New Page</button>
</template>

<script>
export default {
  methods: {
    goToNewPage() {
      this.$router.push('/newpage');
    }
  }
}
</script>

1. 新页面及组件
   在NewPage.vue中定义新页面和相关组件的内容。

这样，当你点击按钮时，就会跳转到新的标签（页面），并展示该页面中的组件内容。