javascript - 如何有条件地将查询参数添加到 Vue.js 中的路由?
问题描述
vue-router
单击按钮后,我正在使用重定向到新 URL。如果实际填写了查询参数,我希望路由器只在 URL 中添加一个查询参数。因此,如果是,null
则不应添加参数。
现在这没有按预期工作。查看以下代码片段(选择每个选项并单击按钮)。
(看来您不能在 Stackoverflow 上使用路由,所以还请查看 JSFiddle 上的代码段:https ://jsfiddle.net/okfyxtsj/28/ )
Vue.use(VueRouter);
new Vue({
el: '#app',
router: new VueRouter({
mode: 'history',
}),
computed: {
currentRoute () {
return this.$route.fullPath
}
},
data () {
return {
some: this.$route.query.some || null
}
},
template: '<div><select v-model="some"><option :value="null">Option (value = null) which leaves empty parameter in URL</option><option value="someParameter">Option (value = someParameter) which shows parameter with value in URL</option><option :value="[]">Option (value = []) which removes parameter from URL</option></select><br><button @click="redirect">Click me</button><br><br><div>Current Path: {{ currentRoute }}</div></div>',
methods: {
redirect () {
this.$router.push({
path: '/search',
query: {
some: this.some || null
}
})
}
},
watch: {
'$route.query': {
handler(query) {
this.some = this.$route.query.hasOwnProperty('some') ? this.$route.query.some : null
},
},
},
watchQuery: ['some']
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>
some
参数何时null
仍将添加到 URL。当some
是一个空数组时,它不会被添加到 URL 中。
我不想使用空数组作为默认值,因为该值应该始终是一个字符串。
那么,如果查询参数包含的值不是 ,我如何确保仅将查询参数添加到新路由中null
?
解决方案
使用简单的if-else
或ternary
构造。也更喜欢计算属性some
而不是观察者:
Vue.use(VueRouter);
new Vue({
el: '#app',
router: new VueRouter({
mode: 'history'
}),
computed: {
some() {
return this.$route.query.some || null;
}
},
data() {
return {};
},
methods: {
redirect() {
const routeConfig = this.some
? { path: '/search', query: { search: this.some } }
: { path: '/search' };
this.$router.push(routeConfig);
}
},
// Remaining config like template, watchers, etc.
});
推荐阅读
- c++ - 是什么让placement new 调用对象的构造函数?
- python - 在python中使用正则表达式提取子字符串后的字符
- mysql - 服务 'wampmysqld64' 未启动,EXIT 错误代码 0
- c++ - 关于 clang 无序警告
- java - Neo4J - JPA - 不返回关系实体
- javascript - 分离后重新添加类
- mongodb - Mongo DB克隆在不同的主机IP但相同的服务器上?
- angular - 如何触发错误并测试方法?
- django - 如何发送发布请求?
- javascript - 请求的资源上存在 Access-Control-Allow-Origin 标头