vue页面跳转router

在Vue中进行页面跳转可以使用Vue Router来实现。以下是一个简单的步骤：

1. 首先，在你的Vue项目中安装Vue Router。你可以通过运行以下命令来安装：

npm install vue-router

2. 在你的项目中创建一个router.js文件（或者你可以选择其他的文件名），并在该文件中引入Vue和Vue Router：

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

Vue.use(VueRouter);

3. 在router.js文件中定义路由规则。你可以使用`VueRouter`实例的`routes`属性来定义路由规则，每个路由规则都包含一个路径和一个组件。例如：

import Home from './components/Home.vue';
import About from './components/About.vue';

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

4. 创建一个`VueRouter`实例，并将路由规则传递给它：

const router = new VueRouter({
  routes
});

5. 在你的Vue实例中使用该路由。假设你的Vue实例是在main.js文件中创建的，你需要在该文件中导入router.js，并将其传递给Vue实例：

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

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

6. 在你的组件中使用`<router-link>`标签来创建链接，以便进行页面跳转。例如，在你的App.vue组件中，你可以添加以下代码：

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

这样，当用户点击"Home"链接时，页面将跳转到Home组件，当用户点击"About"链接时，页面将跳转到About组件。

这是一个简单的示例，你可以根据你的具体需求进行修改和扩展。希望对你有所帮助！