vue-router 2.0 跳转之router.push()用法说明

来讲解一下“vue-router 2.0 跳转之router.push()用法说明”的完整攻略。

来讲解一下“vue-router 2.0 跳转之router.push()用法说明”的完整攻略。

vue-router 2.0 跳转之router.push()用法说明

router.push() 是 vue-router 用来跳转页面的一个方法。在通常的前后端分离开发中，当我们需要跳转页面时，只需要使用 router.push() 就可以了。

这个方法接受一个字符串类型的路径作为参数，然后进行跳转。同时，你也可以通过传递一个或多个配置对象来指定跳转行为，例如修改路由的 query 或 hash 值。

// 通过字符串路径跳转到 /home
this.$router.push('/home')

// 通过对象来进行路由的更加详细配置（跳转到 /home，并带上 query）
this.$router.push({ path: '/home', query: { name: 'John' }})

示例1：通过 router.push() 跳转到指定页面

<template>
  <div>
    <!-- 这里通过点击按钮来触发路由的跳转 -->
    <button @click="jumpToPage">Go to Page 2</button>
  </div>
</template>
<script>
export default {
  methods: {
    jumpToPage () {
      // 点击按钮后，会跳转到带有指定 id 的页面
      this.$router.push({ path: '/page', query: { id: '2' }})
    }
  }
}
</script>

当点击按钮时，会跳转到对应的 /page 页面，并带上 id=2 的查询参数。

示例2：通过 router.push() 动态跳转页面

<template>
  <div>
    <div v-for="page in pages" :key="page.id">
      <!-- 这里通过「:to」属性来动态指定跳转到哪个页面 -->
      <router-link :to="{ path: '/page', query: { id: page.id }}">
        {{ page.title }}
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      pages: [
        { id: '1', title: 'Page 1' },
        { id: '2', title: 'Page 2' },
        { id: '3', title: 'Page 3' },
        { id: '4', title: 'Page 4' },
        { id: '5', title: 'Page 5' }
      ]
    }
  }
}
</script>

这个示例中，我们使用 v-for 来动态生成页面列表，然后使用 router-link 组件来进行跳转。每个页面都会带上不同的 id 值，跳转时也会根据不同的 id 值来动态指定跳转到哪个页面。这样就可以让页面的跳转更加智能和动态。

好了，以上就是“vue-router 2.0 跳转之router.push()用法说明”的完整攻略。