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

VueJS-使用动态数据更新URL

vue-router vuejs2

BaronGrivet · 技术社区 · 6 年前

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

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 回复 | 直到 6 年前

Phil 6 年前

推

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 6 年前

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

从URL获取值

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

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

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

2 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

2 年前

roev · 大堆来自(物体)。forEach不使用vue。js

3 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

6 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

6 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

6 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

6 年前

Tim · VueJS-迭代从AJAX调用返回的数据

6 年前