VUE中使用路由router跳转页面多种方式

前言

在 Vue 中，this.$router.push 是用来跳转到另一个路由的方法，它可以传递参数。Vue Router 提供了多种方式来传递路由参数，常见的有 查询参数（query） 和 路由参数（params）。

1. 查询参数（Query Parameters）

查询参数是 URL 中 ? 后面的部分，格式通常是 key=value。查询参数的优势是可以在 URL 中显示，且不依赖于路由的定义。

路由跳转并传递查询参数
可以使用 this.$router.push 跳转到一个新的路由，并在 URL 中添加查询参数。

// 路由跳转，并传递查询参数
this.$router.push({ path: '/newPage', query: { id: 123, name: 'Tom' } });

这里，/newPage?id=123&name=Tom 是最终跳转后的 URL。可以传递一个对象，指定 path（目标路径）和 query（查询参数）。

在目标页面中获取查询参数

在目标页面中，可以通过 this.$route.query 来获取查询参数。

// 获取查询参数
const id = this.$route.query.id;  // 123
const name = this.$route.query.name;  // 'Tom'

2. 路由参数（Route Params）

路由参数是 URL 路径的一部分，通常在路由定义中使用动态路由（例如：/user/:id）。路由参数通常是隐藏在 URL 中的。

路由跳转并传递路由参数

可以在 this.$router.push 中通过 params 传递路由参数。

// 路由跳转，并传递路由参数
this.$router.push({ name: 'user', params: {  lsls: 123, namez: 'Tom' } });

这里，/user/123 是跳转后的 URL，id 就是路由参数。需要确保路由已经在路由配置中定义了动态参数。

路由配置示例（带参数）

const routes = [
  {
    path: '/user/:lsls/:namez',//可定义多个参数
    name: 'user',
    component: UserPage
  }
];

在目标页面中获取路由参数在目标页面中，可以通过 this.$route.params 获取路由参数。

// 获取路由参数
const id = this.$route.params.lsls;  // 123
const id = this.$route.params.namez;  // Tom

注意事项：

路由参数（params） 只能通过 命名路由 或 动态路由 进行传递（/user/:id。如果在使用 query 参数时，路径会显示为?key=value，而 params 会直接出现在路径中，比如 /user/123。query 和 params 传递的参数方式不同,query 用于查询字符串，params 用于路径参数。 在组件的 mounted 或 created 生命周期钩子中，你可以访问 this.$route 来获取当前路由的参数，无论是 query 还是 params。

• 避免使用 params 和 query 混合使用
• 在访问路由参数时（如 this.r o u t e . p a r a m s 或 t h i s . route.params 或 this.route.params或this.route.query），需要注意你访问它们的时机。如果在组件加载前（如 created 钩子）访问，可能还无法获取到最新的路由信息。此时，可以通过 beforeRouteEnter 或 beforeRouteUpdate 钩子来获取更准确的信息。

beforeRouteEnter(to, from, next) {
  // 在进入页面时获取路由参数
  console.log(to.params.id);
  next();
}

beforeRouteUpdate(to, from, next) {
  // 在路由变化时获取更新后的路由参数
  console.log(to.params.id);
  next();
}

• 如果路由配置中使用了重定向（redirect），并且重定向的目标路径中包含参数，确保参数在重定向过程中正确传递。

const routes = [
  { path: '/oldPage', redirect: { name: 'newPage', params: { id: 123 } } },
  { path: '/newPage/:id', name: 'newPage', component: NewPage }
];
// 如果 /oldPage 被访问，将会重定向到 /newPage/123

• 如果使用了动态路由，并且在路由中传递了 params，但目标组件没有相关的逻辑处理该参数时，可能会遇到问题。建议在组件中使用默认值，确保如果某些参数没有传递时，页面能够正常工作。

const id = this.$route.params.id || 'defaultId';

注：

• params 用于路径参数，适用于动态路由；query 用于查询字符串参数，通常用于 URL 中显示。
• 确保路由配置与传递的参数一致，避免混淆 params 和 query。
• 在访问路由参数时，注意访问时机，推荐使用生命周期钩子如beforeRouteEnter,beforeRouteUpdate 处理路由变化。
• 在跳转时，确保不混用两种参数，保持清晰的参数传递方式。

完整示例Vue 应用，路由配置如下：

import Vue from 'vue';
import Router from 'vue-router';
import UserPage from './components/UserPage';

Vue.use(Router);

const routes = [
  {
    path: '/user/:id/:name?',  // 定义两个动态参数 id 和 name 可以使用?标识参数可选传递
    name: 'user',
    component: UserPage
  }
];

const router = new Router({
  routes
});

export default router;

在跳转时，可以使用如下代码：

// 跳转到 /user/123/Tom
this.$router.push({ name: 'user', params: { id: 123, name: 'Tom' } });

然后在 UserPage 组件中，可以获取到 id 和 name 参数：

export default {
  created() {
    const id = this.$route.params.id;
    const name = this.$route.params.name;// 如果可选参数没传则是undefind
    console.log(`User ID: ${id}, Name: ${name}`);
  }
};

• 顺序：确保在路由定义中，参数的顺序与跳转时传递参数的顺序一致。

• 可选参数：如果你希望某些参数是可选的，可以在路由配置中使用 ? 来标记这些参数为可选。

总结 

到此这篇关于VUE中使用路由router跳转页面多种方式的文章就介绍到这了,更多相关vue用路由router跳转页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论