Vue Router是Vue.js官方提供的路由管理器，用于实现单页面应用（SPA）中的页面跳转和导航功能。通过Vue Router，我们可以在不刷新整个页面的情况下，动态地切换不同的视图组件，实现更加流畅和高效的用户体验。

在Vue Router中，页面跳转是通过路由的方式来实现的。每个路由对应着一个特定的URL路径，当用户点击页面上的链接或者进行其他操作时，Vue Router会根据配置的路由规则，自动切换到对应的路由，并加载相应的组件。

要实现页面跳转，首先需要在Vue项目中安装和配置Vue Router。可以通过npm安装Vue Router，然后在项目的入口文件（一般是main.js）中引入并使用Vue Router。

`javascript

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

// 配置路由规则

const router = new VueRouter({

routes

})

new Vue({

router,

render: h => h(App)

}).$mount('#app')

在上述代码中，我们首先通过import语句引入Vue Router，并通过Vue.use(VueRouter)来使用Vue Router插件。然后，我们定义了一个routes数组，用于配置路由规则。每个路由规则都包含一个path属性，表示URL路径，以及一个component属性，表示对应的组件。
接下来，我们创建了一个Vue Router实例，并传入配置好的路由规则。将Vue Router实例传递给Vue实例的router选项，以便Vue应用能够使用Vue Router提供的路由功能。
在配置好Vue Router后，我们就可以在组件中使用组件来创建导航链接，并使用组件来显示当前路由对应的组件。
`html

在上述代码中，我们使用组件创建了两个导航链接，分别指向/home和/about路径。当用户点击这些链接时，Vue Router会自动切换到对应的路由，并加载对应的组件。而组件则用于显示当前路由对应的组件。

除了使用组件进行页面跳转外，我们还可以通过编程的方式进行页面跳转。Vue Router提供了$router对象，可以通过调用其push方法来实现页面跳转。

`javascript

methods: {

goToHome() {

this.$router.push('/home')

},

goToAbout() {

this.$router.push('/about')

}

在上述代码中，我们在Vue组件的methods选项中定义了两个方法，分别用于跳转到/home和/about路径。通过调用this.$router.push方法，并传入目标路径，即可实现页面跳转。

总结一下，Vue Router是Vue.js官方提供的路由管理器，用于实现单页面应用中的页面跳转和导航功能。通过配置路由规则和使用组件或$router.push方法，我们可以实现页面之间的无刷新跳转，并加载对应的组件。

上一篇

vuerouter动态路由传值

下一篇

vuesocketio给后端发消息