VueJS -使用动态数据更新URL
VueJS -使用动态数据更新URL
提问于 2018-09-13 10:38:59
我有一个单页面的VueJS应用程序，其中有许多我想编码到网址中的数据变量。
例如，如果我的路由配置是(我不确定语法是否正确)：
routes: [
{
path: '/:foo/:bar/:oof/:rab',
component: App
}它的组件是：
<script>
export default {
name: "App",
data: function() {
return {
foo: 1,
bar: 2,
oof: 3,
rab: 4
}
}
}则URL将为http://www.example.com/#/1/2/3/4
如果foo更改为9999，则URL将自动更新：http://www.example.com/#/9999/2/3/4
它还会响应用户更改URL，或者通过将URL值加载到数据中来使用不同的URL打开应用程序。
我认为这将是相对简单的，但在谷歌之后，我完全被正确的方式搞糊涂了。
非常感谢任何帮助/示例/解决方案。
Stack Overflow用户
回答已采纳
发布于 2018-09-13 10:53:51
无论您使用什么来更改这些值，都需要触发路由推送。例如
methods: {
changeFoo (newFoo) {
// you can set foo but it probably won't matter because you're navigating away
this.foo = newFoo
this.$router.push(`/${newFoo}/${this.bar}/${this.oof}/${this.rab}`)
}请参阅https://router.vuejs.org/guide/essentials/navigation.html
如果你使用name your route，它可能会更容易，例如
routes: [{
name: 'home',
path: '/:foo/:bar/:oof/:rab',
component: App
}]然后你可以使用像这样的东西
this.$router.push({name: 'home', params: this.$data})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52305892
复制相关文章
相似问题
腾讯云开发者
