vue.js - 推送路由(从 vueJS 移动到 nuxtJS)
问题描述
我正在将 VueJS 项目转换为 Nuxt.js,但我无法理解 nuxt 如何处理路由。它的文档没有说明推送路线。
使用 VueJS 我在一个组件中有以下内容。
//template
<input class="" type="search"
name="q" id="q" v-model="q"
@keyup.enter="submitSearch"
>
//script
methods: {
submitSearch() {
this.$route.push({name: 'search', query: {q: this.q}});
//also tried the following
//nuxt.$router.push({name: 'search', query: {q: this.q}});
}
}
但这在 Nuxt 中没有任何作用。发出警报('hi);在 submitSearch 内触发很好,但我从未被重定向到该路线。
这里的目标是当用户在搜索栏中按下回车键时,重定向到 /search?q=blablabla
编辑:
问题是用户被重定向到/?q=blablabla
而不是/search?
..
我刚刚意识到这是因为多语言路线有不同的名称。
我将如何推送到动态search
命名而不是 ' '的路由名称search__en
?
解决方案
我最终做到的方式是:
this.$router.push({path: this.localePath('search'), query: {q: this.q}});
推荐阅读
- flutter - Firestore 复合查询不适用于 Flutter Web
- java - 如何使用 springframework.data.jpa.repository.Query 查找两个日期之间忽略时间的所有结果
- javascript - 如何使用 mapbox 提取我的地理位置(当前位置)坐标?
- python - Flask 未从 phpadmin 检索数据
- postgresql - 用 Homebrew 安装 postgresql 不起作用
- https - 在 Zabbix 上设置 https
- next.js - 静态 NextJS 站点中的 localStorage:ReferenceError:localStorage 未定义
- powershell - 文件夹名称中的 Windows Powershell 括号
- apache-kafka - 事件完成后启动 kafka 消费者
- javascript - webpack如何动态加载模块?