vue2路由中router-view不顯示的原因及踩坑記錄
更新時間：2022年04月28日 09:38:37 作者：前端小白QAQ
這篇文章主要介紹了vue2路由中router-view不顯示的原因及踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue2路由router-view不顯示
由于平常都是復制粘貼，對于變量的命名并沒有太大的規(guī)范，在加上看官方文檔并沒與什么說明變量名必須為routes，所以出現(xiàn)了這個原因，不多說上代碼
在代碼中const聲明的變量名必須為routes，千萬不能寫成別的，筆者就寫了一手routers，導致router-view標簽不渲染，結果浪費了一個小時排查錯誤。
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 且是個對象
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue3+TypeScript實現(xiàn)遞歸菜單組件的完整實例
Vue.js中的遞歸組件是一個可以調(diào)用自己的組件,遞歸組件一般用于博客上顯示評論,形菜單或者嵌套菜單,文章主要給大家介紹了關于Vue3+TypeScript實現(xiàn)遞歸菜單組件的相關資料,需要的朋友可以參考下2021-08-08
本篇文章主要介紹了webstorm和.vue中es6語法報錯的解決方法，小編總結了webstorm和.vue中出現(xiàn)的es6語法報錯，避免大家采坑，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
基于Vue+ELement搭建動態(tài)樹與數(shù)據(jù)表格實現(xiàn)分頁模糊查詢實戰(zhàn)全過程
這篇文章主要給大家介紹了關于如何基于Vue+ELement搭建動態(tài)樹與數(shù)據(jù)表格實現(xiàn)分頁模糊查詢的相關資料,Vue Element UI提供了el-pagination組件來實現(xiàn)表格數(shù)據(jù)的分頁功能,需要的朋友可以參考下2023-10-10
KeepAlive?是一個內(nèi)置組件，那封裝一個組件對于大家來說應該不會有太大的困難，它的核心邏輯在于它的?render?函數(shù)，它用?map?去記錄要緩存的組件，就是?[key，vnode]?的形式，這篇文章主要介紹了Vue3?KeepAlive實現(xiàn)原理,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue.js框架路由使用方法實例詳解的相關資料,這里提供實例幫助大家學習理解這部分內(nèi)容，需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細介紹了vue3實現(xiàn)移動端滑動模塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
在 Vue 3 中，父子組件之間進行通信有多種方式，下面簡單介紹下常見的方式及其用法和使用場景，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2024-01-01
Vue+scss白天和夜間模式切換功能的實現(xiàn)方法
這篇文章主要介紹了Vue+scss白天和夜間模式切換功能的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
vue.js是MVVM結構的，同類的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復。這篇文章將給大家深入的介紹vue.js雙向綁定的實現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來看看吧。2016-12-12
這篇文章主要介紹了vue 項目中實現(xiàn)按鈕防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-12-12