Vue Router 编程式导航问题

[iawavij]

methods 里的 toPage 是做分页用的， router.push 还是到当前路由，只是修改 query 参数，但是路由没有跳转， 手动修改浏览器 url 参数，可以触发 beforeRouteUpdate，不知道是不是我哪里有写错，router 版本 3.0.1

export default {
    name: "Event",
    data() {
        return {
            query: {
                per_page: 40
            },
            pagination: {},
            tableHight: null
        }
    },
    methods: {
        toPage(page) {
            Object.assign(this.query, {page: page})
            this.$router.push({name: 'event', query: this.query})
        },
        loadData() {
            const _self = this
            _self.$http.get('/event/main', {params: _self.query}).then(resp => {
                _self.pagination = resp.data;
            })
        },
        watchQuery(query) {
            if (query)
                this.query = Object.assign(query, {per_page: this.query.per_page || 40})
            this.loadData()
        }
    },
    beforeRouteUpdate(to, from, next) {
        // react to route changes...
        // don't forget to call next()
        this.watchQuery(to.query)
        next()
    },
    mounted() {
        const _self = this
        _self.watchQuery(_self.$route.query)
        _self.tableHight = _self.$el.offsetHeight - 48 - 38
        window.onresize = () => {
            _self.tableHight = _self.$el.offsetHeight - 48 - 38
        };
    }
}

[tuzcwish]

你需要在 watch 里面监听$route

只是分页的话为啥要做这么麻烦。。。

ps: 在 mounted 钩子里面，可以直接用 this, 不需要 const _self = this

[iawavij]

@tuzcwish 现在到问题不是监听不到路由，是 router.push 感觉无效了，跳转其他路由没问题，跳转当前路由没用

[iawavij]

@tuzcwish 另外做成这样是想 ajax 请求的参数与当前路由的参数一致，url 分享出去可以带参数请求接口

[tuzcwish]

@iawavij 只是改变 query 的话，本来就是无效的……

[iawavij]

@tuzcwish 好吧，只能另想办法了

[Exia]

是不是直接 push 本页路由好像没有用？能不能这样？写一个空白页，先跳到空白页，然后空白页再跳回来？

[HowardTang]

watch query,发生改变的时候重新加载数据就好啦

[zhlssg]

replace 试试

[iawavij]

@zhlssg 试过，没用

@HowardTang beforeRouteUpdate 替代 watch router