vue.js - 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.js - vue-router相关，地址栏修改url后按回车，不能发起正常请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！