为什么vue-router 连续跳转->返回会导致url地址丢失(找不到页面)

我在一个组件中引入的vue-router

import Router from 'vue-router'

let router = new Router()

然后在一个点击事件中使用push()方法跳转到一个页面,

router.push('/gaming')

可以成功跳转,但是当我连续跳转->返回两次后,浏览器便提示我找不到页面,浏览器地址栏就会清空。

我尝试去监测history,

首先进入首页的时候长度是2;
第一次跳转后,一直到最后一次返回出现找不到页面长度一直都是3;
在找不到页面的情况下,我在浏览器控制台打印history,长度依旧是3.

补充路由代码:

export default new Router({
  linkActiveClass: 'active',
  // mode:'history',
  routes: [
    {
      path: '/wechat',
      name: 'wechat',
      component: wechat,
      children: [
        {
          path: 'index',
          component: wechat_index,
          children: [
            {
              path: '/',
              component: wechat_hot,
              redirect: 'hot'
            },
            {
              path: 'hot',
              component: wechat_hot
            },
            {
              path: 'tabCon1',
              component: wechat_tabCon1,
              children:[
                {
                  path:'/',
                  component:wechat_tabCon1_itm2,
                  redirect:'item2'
                },
                {
                  path:'item1',
                  component:wechat_tabCon1_itm1,
                  name:'item1'
                },
                 {
                  path:'item2',
                  component:wechat_tabCon1_itm2,
                  name:'item2'
                  
                },
                 {
                  path:'item3',
                  component:wechat_tabCon1_itm3,
                  name:'item3'
                  
                },
                 {
                  path:'item4',
                  component:wechat_tabCon1_itm4,
                  name:'item4'
                  
                }
              ]
            },
            {
              path: 'tabCon2',
              component: wechat_tabCon2
            },
            {
              path: 'tabCon3',
              component: wechat_tabCon3
            },
            {
              path: 'tabCon4',
              component: wechat_tabCon4
            }
          ]
        },
        {
          path: 'publish',
          name: 'publish',
          component: wechat_publish
        },
        {
          path: 'chat',
          name: 'chat',
          component: wechat_chat
        },
        {
          path: 'personal',
          name: 'personal',
          component: wechat_personal
        },
        {
          path: 'article',
          name: 'article',
          component: wechat_article
        },

      ]
    },
    {
      path: '/store',
      name: 'store',
      component: store,
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: store_goods
        },
        {
          path:'details',
          component:store_details
        }
      ]
    },
    {
      path: '/share',
      name: 'share',
      component: share,
      children: [
        {
          path: 'detail_video',
          component: detail_video,
          name: 'detail_video'
        },
        {
          path: 'detail_video_s',
          component: detail_video_s,
          name: 'detail_video_s'
        },
        {
          path: 'detail_goods',
          component: detail_goods,
          name: 'detail_goods'
        },
        {
          path: 'detail_article',
          component: detail_article,
          name: 'detail_article'
        },
      ]
    },
    {
      path:'/details',
      component:details,
    },
    {
      path: '*',
      component: wechat_index,
      name: 'index',
      rediect: '/wechat/index'
    }
  ]
})

main.js中:

import router from './router'
...
new Vue({
  el: '#app',
  router,
  store,
  // api,
  // WX,
  template: '<App/>',
  components: { App }
})

组件中:

import Router from 'vue-router'
const router = new Router()

// methods
    showDetails: function (data) {
      router.push('/details?id=' + data._id + '&type=' + data.type + '&lon=' + data.lon + '&lat=' + data.lat)
    }
    
能想到有关联的就是这些了,还有什么需要的请提醒我补充。
阅读 5.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题