快捷導(dǎo)航

vue2路由中router-view不顯示的原因及踩坑記錄

更新時(shí)間：2022年04月28日 09:38:37 作者：前端小白QAQ

這篇文章主要介紹了vue2路由中router-view不顯示的原因及踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue2路由router-view不顯示

由于平常都是復(fù)制粘貼，對(duì)于變量的命名并沒有太大的規(guī)范，在加上看官方文檔并沒與什么說(shuō)明變量名必須為routes，所以出現(xiàn)了這個(gè)原因，不多說(shuō)上代碼

在代碼中const聲明的變量名必須為routes，千萬(wàn)不能寫成別的，筆者就寫了一手routers，導(dǎo)致router-view標(biāo)簽不渲染，結(jié)果浪費(fèi)了一個(gè)小時(shí)排查錯(cuò)誤。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/home'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    redirect: '/index',
    children: [
      {
        path: 'index',
        name: 'index',
        component: () => import('@/views/index.vue')
      }
    ]
  }
]
const router = new VueRouter({
  routes
})
export default router

vue vue-router的神坑

router-view不顯示

必須是routes 且是個(gè)對(duì)象

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用vue3+vite導(dǎo)入圖片路徑錯(cuò)亂問(wèn)題排查及解決
使用vue3+vite開發(fā)的時(shí)候,導(dǎo)入svg圖片時(shí),同一個(gè)文件夾下的文件,其中一個(gè)路徑正常解析,另一個(gè)不行,更改文件名之后,該圖片文件就可以正常解析了,本文給大家介紹了使用vue3+vite導(dǎo)入圖片路徑錯(cuò)亂問(wèn)題排查及解決,需要的朋友可以參考下
2024-03-03
Vue實(shí)現(xiàn)讓頁(yè)面加載時(shí)請(qǐng)求后臺(tái)接口數(shù)據(jù)
這篇文章主要介紹了Vue實(shí)現(xiàn)讓頁(yè)面加載時(shí)請(qǐng)求后臺(tái)接口數(shù)據(jù)
2022-08-08
詳解Vue3?父組件調(diào)用子組件方法($refs?在setup()、＜script?setup＞?中使用)
這篇文章主要介紹了Vue3?父組件調(diào)用子組件方法（$refs?在setup()、＜script?setup＞?中使用）,在 vue2 中 ref 被用來(lái)獲取對(duì)應(yīng)的子元素，然后調(diào)用子元素內(nèi)部的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-08-08
Vue隱藏顯示、只讀實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了Vue隱藏顯示、只讀功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-07-07
淺析vue cli3 封裝Svgicon組件正確姿勢(shì)(推薦)
這篇文章主要介紹了vue cli3 封裝Svgicon組件正確姿勢(shì),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-04-04
vue服務(wù)器代理proxyTable配置如何解決跨域
這篇文章主要介紹了vue服務(wù)器代理proxyTable配置如何解決跨域問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
基于vuejs+webpack的日期選擇插件
這篇文章主要為大家詳細(xì)介紹了基于vuejs+webpack的日期選擇插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
在vue中實(shí)現(xiàn)表單驗(yàn)證碼與滑動(dòng)驗(yàn)證功能的代碼詳解
在Web應(yīng)用程序中，表單驗(yàn)證碼和滑動(dòng)驗(yàn)證是常見的安全機(jī)制，用于防止惡意攻擊和機(jī)器人攻擊，本文將介紹如何使用Vue和vue-verify-code庫(kù)來(lái)實(shí)現(xiàn)表單驗(yàn)證碼和滑動(dòng)驗(yàn)證功能,需要的朋友可以參考下
2023-06-06
vue中更改數(shù)組中屬性,在頁(yè)面中不生效的解決方法
今天小編就為大家分享一篇vue中更改數(shù)組中屬性,在頁(yè)面中不生效的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
報(bào)錯(cuò)[vuex] unknown action type: userLogin問(wèn)
這篇文章主要介紹了報(bào)錯(cuò)[vuex] unknown action type: userLogin問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06