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

VueJS-使用动态数据更新URL

vue-router vuejs2

BaronGrivet · 技术社区 · 8 年前

例如,如果我的路由配置是(我不确定语法是否正确):

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的应用程序。

我认为这将是相对简单的,但在谷歌之后,我完全困惑于正确的方式去做这件事。

2 回复 | 直到 8 年前

Phil 8 年前

推

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})

Nico 8 年前

似乎有两件事你正在努力实现,但我不确定从你的例子,首先在你的理想操作顺序:

从URL获取值

这可以通过 this.$route.params ,它将是一个包含要查找的值的对象。
基于您的 foo , bar oof , rab

你可以用 this.$router.push() 为此: vue-router docs

推荐文章

Jimmy Kiarie · 路由之前的Vue js

8 年前

angelique000 · 对于非常大的Web应用程序,Vue路由器的最佳实践是什么?

8 年前

Felipe Paulo · Vuejs未渲染子路由

8 年前

angelique000 · 如何在Vue组件中加载OpenSeadragon组件

8 年前

dsky · 保持Vue状态

8 年前

Paul Renshaw · Vue。Firebase托管上的js SPA,使用通配符重写Firebase云函数

8 年前

josefdev · 如何在Vue中声明被动属性。js公司

8 年前

ChadQi · 刷新浏览器导致文件路径更改

8 年前

DarkFenix · 访问存储或获取程序的状态_WEBPACK\u IMPORTED\u MODULE\u 3\u store\uuuuuuuuuuuu。a、调度不是一项功能

8 年前

Chad Carter · Vue测试UTIL未知自定义元素:<路由器链接>

8 年前