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)文章
這篇文章主要介紹了vue activated在子組件中的使用，文章圍繞vue activated的xingu你資料講解展開內(nèi)容并附上具體代碼,需要的朋友可以參考一下2021-11-11
Element基于el-input數(shù)字范圍輸入框的實(shí)現(xiàn)
本文主要介紹了?Element基于el-input數(shù)字范圍輸入框的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項(xiàng)目
這篇文章主要介紹了解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項(xiàng)目.文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了Vue 內(nèi)置組件keep-alive的使用示例，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04
element?tab標(biāo)簽管理路由頁面的項(xiàng)目實(shí)踐
本文主要介紹了element?tab標(biāo)簽管理路由頁面的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
最近在做一個(gè)前端vue.js對(duì)接的功能模塊時(shí)，需要實(shí)現(xiàn)一個(gè)下載圖片的功能，本文就介紹了vue.js根據(jù)圖片url進(jìn)行圖片下載，感興趣的可以了解一下2021-06-06
vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問題及解決
這篇文章主要介紹了vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue實(shí)現(xiàn)數(shù)字變換動(dòng)畫的示例代碼
本文主要介紹了vue實(shí)現(xiàn)數(shù)字變換動(dòng)畫的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
前端vue面試總問watch和computed區(qū)別及建議總結(jié)
在現(xiàn)代前端的面試中,vue和react是面試過程中基本必問的技術(shù)棧,其中Vue響應(yīng)式話題,watch和computed是面試官非常喜歡聊的主題,雖然watch和computed它們都用于監(jiān)聽數(shù)據(jù)的變化,但它們?cè)趯?shí)現(xiàn)原理、使用場(chǎng)景和行為上有著顯著的區(qū)別,本文將深入探討,并提供一些面試過程中的建議2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue數(shù)字輸入框組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02