Vue多页面如何在一个页面中跳转至其它页面

在 Vue 多页面项目中，可以使用 Vue Router 实现跳转。

1. 安装 Vue Router：在项目根目录下运行 npm install vue-router

2. 在 main.js 中引入 Vue Router：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3. 创建路由配置文件（例如 router.js），定义路由规则：

import Home from './components/Home.vue'
import About from './components/About.vue'

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

4. 在 main.js 中引入路由配置文件并挂载到 Vue 实例上：

import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

5. 在页面中使用 <router-link> 标签或 router.push() 方法实现跳转：

<!-- 使用 <router-link> 标签 -->
<router-link to="/about">关于</router-link>

<!-- 使用 router.push() 方法 -->
<button @click="$router.push('/about')">关于</button>

注意：vue-router 在4.0版本后，原有的 this.$router.push() 和 this.$router.go() 已经废弃，请使用 this.$router.push() 替代。