关于vue-route的动态跳转问题

Question

在vue-router的官方文档中 对于根据query的不同跳转到相同的页面

export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

给出的是上述方法 用watch监听$route

但是在最近看的一个demo里面 并没有用这种方法也能实现动态加载

不知道这个demo里面是根据什么方法做的动态跳转 求大佬解惑 不胜感激

Answer 1

一般vue-route跳转都是采用你疑惑的这种方法，这种利用router-link进行跳转传参是很简洁明了的，其实原理就是相当于a标签跳转路径顺便绑定（使用v-bind将参数绑定在to上面）相应的参数，目标路径再接收相应参数就可以了。

我之前写了一片分享，可以看下具体怎么做到跳转动态传参的。