vue路由篇之router-view內(nèi)容無法渲染出來問題
更新時(shí)間：2022年04月28日 09:49:43 作者：Katle
這篇文章主要介紹了vue路由篇之router-view內(nèi)容無法渲染出來問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
router-view內(nèi)容無法渲染出來
最近在學(xué)習(xí)vue路由知識(shí)，在寫到關(guān)于 <router-view></router-view>時(shí)，內(nèi)容無法渲染出來，找了許久之后，才發(fā)現(xiàn)是一個(gè)神坑?。?！
配置路由時(shí)注意，名字定義為routes 而不是routers 否則你的也內(nèi)容渲染不出來。
Bug記錄router-view沒有被渲染
起因
在瀏覽器控制臺(tái)查看 router-link 的時(shí)候，發(fā)現(xiàn)其被正常渲染，然而 router-view 卻沒有被瀏覽器渲染出來。
排查
因vue的靜態(tài)路由文件控制著上述的兩個(gè)標(biāo)簽，查看代碼（../router/index.js）如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import pageOne from '../views/pageOne'
import pageTwo from '../views/pageTwo'
Vue.use(VueRouter);
const routers=[ //錯(cuò)誤在這兒（1）
? ? {path:'/pageOne',component:pageOne},
? ? {path:'/pageTwo',component:pageTwo},
? ? {path:'/',component:pageOne}
];
const router=new VueRouter({
? ? routers ?//錯(cuò)誤在這兒（2）
});
export default router錯(cuò)因
由于在寫代碼時(shí)，習(xí)慣性的將路由寫成 routers ，而原本這里應(yīng)該寫成 routes，只是一個(gè)字母 r 之差。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中使用v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的三種方案
這篇文章主要介紹了vue3中使用v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的三種方案,如果只有一個(gè)匿名v-model的傳遞的話,可以使用vue3.3新添加的編譯宏,defineModel來使用,每種方案結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
vue?element-ui的el-input-number默認(rèn)值設(shè)置為空方法
這篇文章主要給大家介紹了關(guān)于vue?element-ui的el-input-number默認(rèn)值設(shè)置為空的相關(guān)資料,el-input-number組件是Element?UI非常常用的一個(gè)數(shù)字輸入框組件,它提供了默認(rèn)值設(shè)置的選項(xiàng),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue this.$toast()用法 ，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本文主要介紹了在Vue中使用的一些常見混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器對(duì)代碼進(jìn)行加固,需要的可以參考下2023-12-12
詳解vite+ts快速搭建vue3項(xiàng)目以及介紹相關(guān)特性
這篇文章主要介紹了vite+ts快速搭建vue3項(xiàng)目以及介紹相關(guān)特性，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
本篇文章主要介紹了簡(jiǎn)單理解Vue中的nextTick方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
今天小編就為大家分享一篇對(duì)vux點(diǎn)擊事件的優(yōu)化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
一文詳解Vue響應(yīng)式數(shù)據(jù)的原理
在vue2的響應(yīng)式中,存在著添加屬性、刪除屬性、以及通過下標(biāo)修改數(shù)組,但頁面不會(huì)自動(dòng)更新的問題,而這些問題在vue3中都得以解決,本文就給大家詳細(xì)的介紹一下Vue響應(yīng)式數(shù)據(jù)原理,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
在前端開發(fā)的時(shí)候經(jīng)常會(huì)遇到這樣的困惑,設(shè)計(jì)師給你的設(shè)計(jì)稿的尺寸和頁面的尺寸不一致,導(dǎo)致了頁面無法正常顯示,下面這篇文章主要給大家介紹了關(guān)于一招解決vue頁面自適應(yīng)布局的相關(guān)資料,需要的朋友可以參考下2022-07-07
Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07