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

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

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

vue2路由router-view不顯示

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

在代碼中const聲明的變量名必須為routes，千萬不能寫成別的，筆者就寫了一手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+TypeScript實(shí)現(xiàn)遞歸菜單組件的完整實(shí)例
Vue.js中的遞歸組件是一個(gè)可以調(diào)用自己的組件,遞歸組件一般用于博客上顯示評(píng)論,形菜單或者嵌套菜單,文章主要給大家介紹了關(guān)于Vue3+TypeScript實(shí)現(xiàn)遞歸菜單組件的相關(guān)資料,需要的朋友可以參考下
2021-08-08
webstorm和.vue中es6語法報(bào)錯(cuò)的解決方法
本篇文章主要介紹了webstorm和.vue中es6語法報(bào)錯(cuò)的解決方法，小編總結(jié)了webstorm和.vue中出現(xiàn)的es6語法報(bào)錯(cuò)，避免大家采坑，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-05-05
基于Vue+ELement搭建動(dòng)態(tài)樹與數(shù)據(jù)表格實(shí)現(xiàn)分頁模糊查詢實(shí)戰(zhàn)全過程
這篇文章主要給大家介紹了關(guān)于如何基于Vue+ELement搭建動(dòng)態(tài)樹與數(shù)據(jù)表格實(shí)現(xiàn)分頁模糊查詢的相關(guān)資料,Vue Element UI提供了el-pagination組件來實(shí)現(xiàn)表格數(shù)據(jù)的分頁功能,需要的朋友可以參考下
2023-10-10
Vue3?KeepAlive實(shí)現(xiàn)原理解析
KeepAlive?是一個(gè)內(nèi)置組件，那封裝一個(gè)組件對(duì)于大家來說應(yīng)該不會(huì)有太大的困難，它的核心邏輯在于它的?render?函數(shù)，它用?map?去記錄要緩存的組件，就是?[key，vnode]?的形式，這篇文章主要介紹了Vue3?KeepAlive實(shí)現(xiàn)原理,需要的朋友可以參考下
2022-09-09
Vue.js框架路由使用方法實(shí)例詳解
這篇文章主要介紹了Vue.js框架路由使用方法實(shí)例詳解的相關(guān)資料,這里提供實(shí)例幫助大家學(xué)習(xí)理解這部分內(nèi)容，需要的朋友可以參考下
2017-08-08
vue3實(shí)現(xiàn)移動(dòng)端滑動(dòng)模塊
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)移動(dòng)端滑動(dòng)模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
Vue3中父子傳參常見方式及用法
在 Vue 3 中，父子組件之間進(jìn)行通信有多種方式，下面簡(jiǎn)單介紹下常見的方式及其用法和使用場(chǎng)景，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2024-01-01
Vue+scss白天和夜間模式切換功能的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue+scss白天和夜間模式切換功能的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
深入理解vue.js雙向綁定的實(shí)現(xiàn)原理
vue.js是MVVM結(jié)構(gòu)的，同類的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復(fù)。這篇文章將給大家深入的介紹vue.js雙向綁定的實(shí)現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來看看吧。
2016-12-12
vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法
這篇文章主要介紹了vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-12-12