vue router 页面跳转

在Vue中，你可以使用Vue Router来实现页面跳转。下面是一个简单的示例：

首先，你需要安装Vue Router。在命令行中运行以下命令：

npm install vue-router

然后，在你的Vue应用程序的入口文件（通常是main.js）中，导入Vue Router，并将其作为Vue实例的插件使用：

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

Vue.use(VueRouter)

接下来，你需要定义你的路由。在同一个文件中，创建一个新的Vue Router实例，并配置你的路由规则。例如：

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

const router = new VueRouter({
  routes
})

在这个例子中，我们定义了三个路由：`/`，`/about`和`/contact`。对应的组件分别是Home、About和Contact。

最后，在你的Vue实例中，将路由器添加到Vue实例的配置中：

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

现在，你可以在你的应用程序中使用`<router-link>`组件来进行页面跳转。例如，在导航栏中添加以下代码：

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

当用户点击链接时，Vue Router会根据配置的路由规则自动导航到相应的组件。

当然，这只是Vue Router的基本用法。你还可以使用更多高级功能，如动态路由、嵌套路由、路由守卫等。你可以查阅Vue Router的官方文档以获取更多详细信息。