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. $ro u t e . p a r am s 或 t hi s .$ 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;// 如果可选参数没传则是undefindconsole.log(`User ID: ${id}, Name: ${name}`);}
};