vue router 进行页面跳转携带参数

在 Vue 项目中，使用 Vue Router 进行页面跳转是很常见的需求。以下是如何在 Vue 组件中使用 Vue Router 进行页面跳转的几种方法：

1. 使用 <router-link> 组件

<router-link> 是 Vue Router 提供的用于在模板中创建导航链接的组件。它会渲染为一个 <a> 标签，并且处理点击事件来实现页面跳转。

<template>
  <div>
    <router-link to="/path">Go to Path</router-link>
  </div>
</template>

2. 使用 this.$router.push 方法

在 Vue 组件的脚本部分，可以使用 this.$router.push 方法进行编程式导航。

<template>
  <div>
    <button @click="goToPath">Go to Path</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToPath() {
      this.$router.push('/path');
    }
  }
}
</script>

3. 使用 this.$router.replace 方法

this.$router.replace 方法与 this.$router.push 类似，但是不会在浏览器历史记录中添加新条目，适合替换当前页面。

<template>
  <div>
    <button @click="replacePath">Replace Path</button>
  </div>
</template>

<script>
export default {
  methods: {
    replacePath() {
      this.$router.replace('/path');
    }
  }
}
</script>

4. 传递参数或查询字符串

可以在跳转时传递参数或查询字符串。

使用命名路由和参数

<template>
  <div>
    <button @click="goToUser(123)">Go to User 123</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToUser(id) {
      this.$router.push({ name: 'user', params: { userId: id } });
    }
  }
}
</script>

使用查询字符串

<template>
  <div>
    <button @click="goWithQuery">Go with Query</button>
  </div>
</template>

<script>
export default {
  methods: {
    goWithQuery() {
      this.$router.push({ path: '/path', query: { q: 'search' } });
    }
  }
}
</script>

5. 导航守卫

有时需要在页面跳转之前进行一些操作，例如验证用户权限。这时可以使用导航守卫。

// router/index.js
router.beforeEach((to, from, next) => {
  if (to.path === '/restricted' && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

示例完整代码

以下是一个完整的 Vue 组件示例，展示了如何使用上述方法进行页面跳转：

<template>
  <div>
    <router-link to="/home">Home</router-link>
    <button @click="goToAbout">Go to About</button>
    <button @click="replaceToContact">Replace to Contact</button>
    <button @click="goToUser(123)">Go to User 123</button>
    <button @click="goWithQuery">Go with Query</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about');
    },
    replaceToContact() {
      this.$router.replace('/contact');
    },
    goToUser(id) {
      this.$router.push({ name: 'user', params: { userId: id } });
    },
    goWithQuery() {
      this.$router.push({ path: '/search', query: { q: 'vue' } });
    }
  }
}
</script>

通过这些方法，你可以在 Vue 组件中灵活地使用 Vue Router 进行页面跳转。