vue跳转页面的几种方法(推荐)

下面是详细讲解“Vue跳转页面的几种方法(推荐)”的完整攻略。

下面是详细讲解“Vue跳转页面的几种方法(推荐)”的完整攻略。

简介

在Vue开发中，页面跳转是非常常见的操作。本文主要介绍Vue跳转页面的几种方法，旨在为Vue初学者提供一些参考。

方法一：Vue-router路由跳转

Vue-router是Vue官方提供的路由管理插件，可以很方便地实现页面的跳转。

步骤如下：

1. 安装Vue-router：在命令行中执行以下命令：

bash
npm install vue-router --save

1. 在Vue项目的入口文件（一般是main.js）中引入Vue-router，并配置路由：

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})

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

1. 在需要跳转的组件中使用<router-link>进行跳转：

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

或者在代码中编程式地进行跳转：

javascript
this.$router.push('/home')
this.$router.replace('/about')

效果示例请查看下面的代码演示。

<template>
  <div>
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <h2>当前路由是：{{ $route.path }}</h2>
    <router-view></router-view>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
import About from "./components/About.vue";

export default {
  name: "App",
  components: {
    Home,
    About,
  },
};
</script>

方法二：使用window.location进行跳转

使用window.location进行跳转是比较原始的方法，但是在有些场景下可能更加方便。

代码如下：

window.location.href = "http://www.example.com";

效果示例请查看下面的代码演示。

结束语

以上就是Vue跳转页面的几种方法，其中Vue-router路由跳转是推荐的方法。希望本文能对你有所帮助。如有不足之处，欢迎指正。

示例一

<template>
  <div>
    <button @click="jump()">跳转到about页面</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    jump() {
      this.$router.push("/about");
    },
  },
};
</script>

示例二

<template>
  <div>
    <button @click="jump()">跳转到百度</button>
  </div>
</template>

<script>
export default {
  name: "About",
  methods: {
    jump() {
      window.location.href = "http://www.baidu.com";
    },
  },
};
</script>