vue路由跳转几种方式

WBOY 原创: 2023-05-11 10:15:36 1175浏览

在Vue.js中，路由是一个非常重要的概念。它允许我们根据不同的URL地址来展示不同的内容。在Vue.js中，我们可以通过路由地址来访问不同的组件或页面。在本文中，我们将介绍几种Vue.js中路由跳转的方式。

一、使用router-link组件实现路由跳转

router-link是Vue.js内置的路由跳转组件。它提供了一个标签来访问不同的链接，将URL地址传递给router-view组件来展示对应的页面。我们可以在模板中使用router-link组件来实现页面之间的跳转。

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

在上面的代码中，我们使用了两个router-link组件。to属性用于指定跳转的路由地址，例如to="/about"表示跳转到关于我们页面。当我们点击标签时，Vue.js会根据to属性的值来匹配路由地址并展示对应的组件。

二、使用Vue.js中的编程式导航实现路由跳转

除了使用router-link组件进行路由跳转之外，Vue.js还提供了一种编程式导航的方式来进行路由跳转。编程式导航是通过JavaScript代码来实现路由跳转，它允许我们在代码中直接跳转到指定的页面。

下面是使用Vue.js中的编程式导航实现路由跳转的示例代码：

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('//m.sbmmt.com/m/');
    },
    goAbout() {
      this.$router.push('/about');
    }
  }
}
</script>

在上面的代码中，我们使用了两个按钮来实现路由跳转。当我们点击按钮时，调用goHome或者goAbout方法实现路由跳转。在Vue.js中，我们可以通过this.$router来访问路由对象，调用push()方法来实现路由跳转。当我们调用push()方法并传入目标路由地址时，Vue.js会自动匹配路由地址并展示对应的组件。

三、使用router.push()方法实现路由跳转

除了使用$this.$router.push()方法实现路由跳转之外，Vue.js还提供了一种router.push()方法的方式来进行路由跳转。与$this.$router.push()方法相比，router.push()方法更加直接，可以让我们更加精细地控制路由跳转的行为。

下面是使用router.push()方法实现路由跳转的示例代码：

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
import { Router } from 'vue-router';

export default {
  methods: {
    goHome() {
      this.$router.push('//m.sbmmt.com/m/');
    },
    goAbout() {
      const route = { path: '/about', name: 'About' };
      this.$router.push(route);
    }
  }
}
</script>

在上面的代码中，我们使用了router.push()方法来实现跳转。我们可以传递一个字符串或者一个对象来指定目标路由地址。在上面的例子中，我们传递了一个对象来指定关于我们页面的路由地址和名称。

总结

在Vue.js中，路由是一个非常重要的概念。在实际开发中，我们需要根据实际情况来选择合适的路由跳转方式。router-link组件和编程式导航都是常用的路由跳转方式，可以满足大部分的开发需求。如果需要更加精细地控制路由跳转的行为，我们可以使用router.push()方法来实现路由跳转。

以上就是vue路由跳转几种方式的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：vue怎么调用浏览器下载图片下一条：vue 插值表达式转义