Vue中从一个页面跳转至另外一个页面

在Vue中，可以使用`vue-router`来进行页面的跳转。

首先，在项目中安装`vue-router`：

npm install vue-router --save

然后，在`main.js`中引入`vue-router`并注册：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

接着，在`router`文件夹下创建一个`index.js`文件，用来配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

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

export default router

上面的代码中，我们定义了两个路由：`/`和`/about`，分别对应`Home`组件和`About`组件。

最后，在需要跳转的地方，可以使用`<router-link>`标签来跳转：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

也可以使用`$router`对象的`push`、`replace`方法来进行跳转：

// 跳转到Home组件
this.$router.push('/')
// 跳转到About组件
this.$router.push('/about')