vue-router相关,地址栏修改url后按回车,不能发起正常请求

1.问题

配置了vue-router前端路由,会直接载入.vue组件,组件内ready()部分从服务器拉数据。已经正确加载页面,尝试修改url最后一个参数(数字),希望按回车键后加载新的内容。发现要按2次回车才能正常请求

前端路由格式为/newspost/:postid,地址栏现在为:

http://localhost:8080/!/newspost/2

2换成3,然后按回车:

http://localhost:8080/!/newspost/3

则页面没有变化,chrome开f12的network发现并没有发起请求。再次到地址栏按回车(不修改数字参数),则发起请求并加载内容。如果第二次也修改了url参数,那么回车后依然不发起请求。

2.代码

//detail.vue

<template>
  <div id="detail">
    <h1>{{post.title}}</h1>
    <span>文章类型:[{{post.type}}]<span>
    <hr/>
    <span>正文:</span>
    <div>
      {{post.content}}
    </div>    
  </div>
</template>

<script>
export default{
  data () {
    return {
      post: {}
    }
  },
  ready () {
    this.$http({
      url: 'http://mysite/rsite/post/' + this.$route.params.postid,
      method: 'get'
    }).then((response) => {
      var data = JSON.parse(response.data)
      console.log(data)
      if (data.code === 0) {
        this.post = data.msg
      }
    })
  }
}
</script>

路由配置文件config_route.js:

export function configRouter (router) {
  router.map({
    '/index': {
      name: 'index',
      title: '全部',
      component: (resolve) => require(['./components/index/index.vue'], resolve)
    },
    '/newspost': {
      name: 'newspost',
      title: '新闻资讯',
      component: (resolve) => require(['./components/newspost/index.vue'], resolve)
    },
    '/newspost/:postid': {
      name: 'newspostOne',
      title: '新闻资讯单条具体内容',
      component: (resolve) => require(['./components/newspost/detail.vue'], resolve)
    }
  })

  router.redirect({
    '/': 'index'
  })
}

route-view组件的使用,App.vue:

<template>
  <div id="app">
    <elonxi-headnav :is="signed"></elonxi-headnav>
    <router-view></router-view>
  </div>
</template>

<script>
import headnav from './common/headnav'

export default {
  components: {
    'elonxi-headnav': headnav,
  }
}
</script>

回答:

我觉得重用组件会更好一点,因为你ready中做的东西只不过是数据的更新,所以这个组件是可以复用的,正确的使用route的钩子就好了,例如,你可以这样子:

export default{
    route: {
        data({ next }) {
            // 异步更新数据
            // 请求成功之后使用next()来继续流水线
        }
    }
}

data钩子函数里面处理数据也是官方提倡的方法。个人认为没有必要把canReuse钩子给关掉,因为这样子性能应该会更好一点。

回答:

找到问题所在了, 自问自答。是vue-router默认重用组件导致的,要在组件内设定canReuse的返回值:

export default{
  route: {
    canReuse: function (transition) {
      return false
    }
  },
  data () {
    ...
  },
  ...
}

参考:
https://segmentfault.com/q/10…
http://router.vuejs.org/zh-cn…
http://router.vuejs.org/zh-cn…

回答:

使用router提供的方法:

route: {
    data() {
        const id = vm.$route.params.postid;
    }
}

回答:

用不用把模式换成history

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注