vue如何打开新的页面标签

在Vue中打开新的页面标签，可以使用Vue Router实现。

首先，在Vue项目中安装Vue Router：

npm install vue-router --save

然后，在main.js中引入Vue Router并使用它：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上面的代码中，我们定义了两个路由：'/'和'/about'，分别对应Home和About组件。然后创建了一个VueRouter实例，将路由配置传递给它，最后将其导出。

现在，在需要打开新页面的地方，可以使用router.push()方法来实现：

<template>
  <div>
    <button @click="goToAbout()">Go to About page</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

在上面的代码中，我们在模板中创建了一个按钮，并为它绑定了一个点击事件，当点击按钮时，调用goToAbout方法，使用this.$router.push()方法打开新的页面标签，将路由路径'/about'传递给它。