vue页面跳转

指定页面跳转

this.$router.push({ path:'/two.html'  })

<router-link to='two.html'><button>点我到第二个页面</button></router-link>

跳转上一个页面

this.$router.go(-1);   this.$router.back()       

完整案例

在Vue.js中，页面跳转通常是通过Vue Router实现的。Vue Router是Vue.js官方的路由管理器，用于实现单页面应用程序（SPA）中不同页面之间的切换和导航。

下面是一个简单的示例，演示如何在Vue.js中实现页面跳转：

1. 首先，确保你已经安装了Vue Router。如果没有安装，可以使用以下命令进行安装：

npm install vue-router

2. 在Vue项目中，创建一个router文件夹，并在该文件夹下新建一个index.js文件，用来配置路由：

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

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;

3. 在主Vue实例中，引入并使用router：

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

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

4. 在组件中使用`<router-link>`标签来实现页面跳转：

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

    <router-view></router-view>
  </div>
</template>

5. 以上代码中，`<router-link>`标签用来设置跳转目标，`to`属性指定跳转的路径。而`<router-view>`标签则用来展示当前路由对应的组件。

当用户点击`<router-link>`时，Vue Router会根据`to`属性中指定的路径进行页面跳转，同时会在`<router-view>`中显示相应的组件内容。

这是一个简单的页面跳转示例，你可以根据实际需求和项目结构来扩展和修改路由配置。希望这个简单的示例能够帮助到你，如果有任何问题或需要进一步的解释，请随时告诉我！