V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
iawavij
V2EX  ›  问与答

Vue Router 编程式导航问题

  •  
  •   iawavij · 2018-12-03 16:45:07 +08:00 · 1521 次点击
    这是一个创建于 1942 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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
            };
        }
    }
    
    9 条回复    2018-12-04 16:04:18 +08:00
    tuzcwish
        1
    tuzcwish  
       2018-12-03 17:01:59 +08:00
    你需要在 watch 里面监听$route

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

    ps: 在 mounted 钩子里面,可以直接用 this, 不需要 const _self = this
    iawavij
        2
    iawavij  
    OP
       2018-12-03 17:07:25 +08:00
    @tuzcwish 现在到问题不是监听不到路由,是 router.push 感觉无效了,跳转其他路由没问题,跳转当前路由没用
    iawavij
        3
    iawavij  
    OP
       2018-12-03 17:13:19 +08:00
    @tuzcwish 另外做成这样是想 ajax 请求的参数与当前路由的参数一致,url 分享出去可以带参数请求接口
    tuzcwish
        4
    tuzcwish  
       2018-12-03 17:13:28 +08:00
    @iawavij 只是改变 query 的话,本来就是无效的……
    iawavij
        5
    iawavij  
    OP
       2018-12-03 17:15:07 +08:00
    @tuzcwish 好吧,只能另想办法了
    Exia
        6
    Exia  
       2018-12-03 17:47:11 +08:00
    是不是直接 push 本页路由好像没有用?能不能这样?写一个空白页,先跳到空白页,然后空白页再跳回来?
    HowardTang
        7
    HowardTang  
       2018-12-04 09:09:41 +08:00
    watch query,发生改变的时候重新加载数据就好啦
    zhlssg
        8
    zhlssg  
       2018-12-04 09:25:04 +08:00
    replace 试试
    iawavij
        9
    iawavij  
    OP
       2018-12-04 16:04:18 +08:00
    @zhlssg 试过,没用

    @HowardTang beforeRouteUpdate 替代 watch router
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1193 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 18:23 · PVG 02:23 · LAX 11:23 · JFK 14:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.