Vue2 js文件里如何跳转路由|极客教程

Vue2 js文件里如何跳转路由

在Vue.js中，我们经常需要在点击事件或者其他操作时跳转到不同的页面，这就涉及到路由的跳转。Vue.js提供了vue-router来管理路由，我们可以在js文件中通过vue-router的api来实现路由的跳转。

使用vue-router进行路由跳转

首先，我们需要在项目中安装vue-router，并在入口文件中引入vue-router：

// main.js

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

在上面的代码中，我们定义了两个路由：’/’对应Home组件，’/about’对应About组件。然后创建了一个router实例，并将其传入Vue实例中。

接下来，我们可以在js文件中通过router的api进行路由跳转。首先，我们需要在js文件中引入router实例：

// someComponent.js

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

export default {
  methods: {
    handleClick() {
      router.push('/about')
    }
  }
}

在上面的代码中，我们定义了一个名为handleClick的方法，在方法内部使用router.push进行路由跳转。当该方法被调用时，页面将跳转到’/about’这个路由。

示例代码及运行结果

下面我们来看一个完整的示例代码，并演示路由跳转的效果：

// main.js

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

<!-- Home.vue -->

<template>
  <div>
    <h1>Home Page</h1>
    <button @click="handleClick">Go to About Page</button>
  </div>
</template>

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

<!-- About.vue -->

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

在上面的代码中，我们通过按钮的点击事件来触发路由跳转，点击按钮后页面将跳转到’/about’路由对应的About页面。

现在我们可以在浏览器中看到效果，点击按钮后页面会实现路由跳转。

总结

通过上面的介绍和示例代码，我们了解了在Vue.js中如何在js文件里实现路由跳转。利用vue-router的api，我们可以很方便地进行路由跳转操作，从而实现页面的跳转功能。

Vue2 js文件里如何跳转路由