"頁面刷新或點擊連結後,vue router的最後一個路由不會被渲染"
P粉277824378
P粉277824378 2023-08-26 10:27:45
0
1
537
<p>當我點擊選單連結時,我的最後一個vue-router元件正常加載,但當我分享連結或刷新頁面時,元件不會渲染。我不知道可能是什麼問題,因為它只發生在最後一個路由上。</p> <p>這是一個連結:<a href="https://www.hvarboating.com/speed-boat-hire-hvar-flyer747">https://www.hvarboating.com/speed-boat -hire-hvar-flyer747</a></p> <p>我的路由器:</p>
從 'vue' 匯入 Vue
從 'vue-router' 匯入 VueRouter

Vue.use(VueRouter)

導出常數路由= [
  {
    小路: '/',
    名稱:'家',
    組件:() => import(/* webpackChunkName: "關於" */ '../views/Home')

  },
  {
    路徑:'/藍色洞穴-克羅埃西亞',
    name: '團體旅遊詳情',
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件:() => import(/* webpackChunkName: "關於" */ '../views/GroupToursDetails')
  },
  {
    路: '/乘船遊覽',
    名稱:“乘船遊覽”,
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件:() => import(/* webpackChunkName: "關於" */ '../views/BoatTours')
  },

  {
    路徑: '/hvar-boat-rental',
    名稱:“船舶租賃”,
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件:() => import(/* webpackChunkName: "關於" */ '../views/BoatRentals')
  },
  {
    路徑:'/從分裂到赫瓦爾轉移',
    name: '船接送',
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件:() => import(/* webpackChunkName: "關於" */ '../views/BoatTransfers')
  },

  {
    路徑: '/hvar-天氣',
    名稱:“天氣”,
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件:() => import(/* webpackChunkName: "關於" */ '../views/Weather')
  },
  {
    路徑: '/常見問題',
    name: '常見問題',
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件:() => import(/* webpackChunkName: "關於" */ '../views/Faq')
  },
  {
    路徑:'/聯絡人',
    名稱:'聯絡人',
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件:() => import(/* webpackChunkName: "關於" */ '../views/Contact')
  },
  {
    路徑: '/:id',
    元:{
      網站地圖:{
        蛞蝓:[
          '來自赫瓦爾的藍色洞穴之旅',
          '赫瓦爾私人最佳海灘',
          '茲拉特尼拉特布拉奇島',
          “遊船派對”

        ]
      }
    },
    名稱:'詳細資料',
    道具:真實,
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件:() => import(/* webpackChunkName: "關於" */ '../views/PrivateToursDetails')
  },
  {
    路徑: '/:id',
    元:{
      網站地圖:{
        蛞蝓:[
          '快艇租賃-Hvar-flyer747',
          '豪華租船赫瓦爾龍捲風38',


        ]
      }
    },
    名稱:“出租”,
    道具:真實,
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件:() => import(/* webpackChunkName: "關於" */ '../views/BoatRentDetails')
  },
]

const 路由器 = 新 VueRouter({
  滾動行為() {
    返回 {x: 0, y: 0}
  },
  模式:“歷史”,
  基底地址:process.env.BASE_URL,
  路線,

})

匯出預設路由器
P粉277824378
P粉277824378

全部回覆(1)
P粉020085599

你的最後兩個路由具有相同的路徑/:id,所以如果你透過路由名稱切換路由,它可以正常工作,但是當你刷新或使用連結時,它不知道你想要使用哪個路由,因此無法渲染元件。

解決方案:為每個路由使用唯一的路徑

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!