vue-router 实现全局路由跳转-JavaScript中文网-JavaScript教程资源分享门户

随着前端单页应用的兴起，路由跳转已经成为了前端开发中必不可少的功能。在 Vue.js 中，我们可以使用 vue-router 库来实现路由跳转。本文将介绍如何使用 vue-router 实现全局路由跳转，并且会提供示例代码。

安装 vue-router

我们可以通过 npm 来安装 vue-router：

npm install vue-router

基本用法

我们可以在 Vue.js 实例中引入并使用 vue-router：

-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------

------------------

----- ------ - --- -----------
  ------- -
    - ----- ---- ---------- ---- --
    - ----- --------- ---------- ----- -
  -
--

----- --- - --- -----
  ------
-----------------

我们可以通过在 routes 中配置路由信息来定义路由：

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

当用户访问 / 路径时，加载 Home 组件，访问 /about 路径时，加载 About 组件。

我们可以在模板中使用 <router-link> 来生成路由链接：

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

我们也可以通过编程式导航来实现路由跳转：

// 在组件中
this.$router.push('/')

全局路由跳转

现在我们来介绍如何实现全局路由跳转。全局路由跳转是指用户在任意组件中都可以跳转到另一个路由。

我们可以在 Vue.js 实例中定义一个方法，然后在所有组件中都可以使用该方法：

const app = new Vue({
  router,
  methods: {
    goTo(path) {
      this.$router.push(path)
    }
  }
}).$mount('#app')

现在我们可以在任意组件中调用 goTo 方法来跳转路由了：

this.goTo('/')

总结

通过本文的介绍，我们学习了如何使用 vue-router 实现全局路由跳转。我们可以在 Vue.js 实例中定义一个方法来实现全局路由跳转，让我们在所有组件中都可以使用该方法。如果您在项目中遇到了路由跳转的问题，可以尝试使用 vue-router 来实现。示例代码如下：

-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------ ---- ---- ------------------
------ ----- ---- -------------------

------------------

----- ------ - --- -----------
  ------- -
    - ----- ---- ---------- ---- --
    - ----- --------- ---------- ----- -
  -
--

----- --- - --- -----
  -------
  -------- -
    ---------- -
      -----------------------
    -
  -
-----------------

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <button @click="goTo('/about')">Go to about page</button>
  </div>
</template>

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64686c00968c7c53b08a379d