代码之家 › 专栏 › 技术社区 › luthien

带可选参数和任意顺序的Vue.JS路由

routeparams vue-router vue.js

luthien · 技术社区 · 6 年前

vue-router 这样地:

http://localhost:8080/#/home/name=Alice&surname=Smith

我已将此路线添加到 routes router.ts :

 routes: [{
    path: '/home/name=:name&surname=:surname',
    name: 'home',
    component: Home
 }]

另外,我还想做两件事:

name 和 surname 以任何顺序。 E、 g.这两个url应该导致相同的视图:

http://localhost:8080/#/home/name=Alice&surname=Smith
http://localhost:8080/#/home/surname=Smith&name=Alice

2) 我也希望它们是可选的。

有办法做这些事吗?谢谢您!

1 回复 | 直到 6 年前

Max Martynov 6 年前

要实现所需,必须更改路由:

routes: [{
    path: '/home',
    name: 'home',
    component: Home
}]

使用查询参数打开此路由:

router.push({ name: 'home', query: { name: 'Alice', surname: 'Smith' }});

http://localhost:8080/#/home?name=Alice&surname=Smith

在路由中,您可以将查询参数设置为 this.$route.query.name &安培; this.$route.query.surname

检查 documentation 以获取更多信息。

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前