点击跳转页面vue

点击跳转页面是在网页中常见的交互方式之一，通过点击某个元素，可以跳转到另一个页面。在Vue中，我们可以使用Vue Router来实现点击跳转页面的功能。

我们需要安装Vue Router。在命令行中运行以下命令：

npm install vue-router

安装完成后，在项目的入口文件（通常是main.js）中引入Vue Router，并将其挂载到Vue实例上：

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

接下来，我们需要定义路由。在Vue Router中，路由由路径和组件组成。路径决定了访问该路由时的URL，而组件则决定了该路由对应的页面内容。我们可以在一个单独的文件中定义路由，例如routes.js：

import Home from './components/Home.vue'
import About from './components/About.vue'
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
export default routes

在上面的代码中，我们定义了两个路由，分别是路径为'/'和'/about'的路由，它们分别对应Home组件和About组件。

接下来，在入口文件中创建Vue Router实例，并将定义的路由传入：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)
const router = new VueRouter({
  routes
})

然后，将Vue Router实例挂载到Vue实例上：

new Vue({
  router
}).$mount('#app')

现在，我们已经完成了Vue Router的配置。接下来，我们可以在需要跳转页面的地方使用`<router-link>`组件来创建跳转链接。例如，在一个导航栏组件中，我们可以使用`<router-link>`来创建导航链接：

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

在上面的代码中，我们创建了两个导航链接，分别对应路径为'/'和'/about'的路由。

我们需要在Vue实例中使用`<router-view>`组件来显示当前路由对应的页面内容。例如，在App.vue组件中：

<template>
  <div id="app">
    <nav></nav>
    <router-view></router-view>
  </div>
</template>

在上面的代码中，`<router-view>`将根据当前路由的路径来动态渲染对应的组件。

通过以上步骤，我们已经成功实现了点击跳转页面的功能。当用户点击导航链接时，Vue Router会根据链接的路径自动切换页面内容，无需刷新整个页面。

除了基本的点击跳转页面功能，Vue Router还提供了更多的高级特性，例如路由传参、路由嵌套、路由懒加载等。这些特性可以根据项目的需求进行进一步的学习和使用，以提升网页的交互体验和性能。