vue-router 中router-view不能渲染的解決方法

更新時(shí)間：2017年05月23日 09:28:20 作者：ontheway1215

本篇文章主要結(jié)合了vue-router 中router-view不能渲染的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近在做一個(gè)vue的項(xiàng)目，其中使用了vue2.0,vue-router2.0。在使用vue-router的時(shí)候跳了一個(gè)很大的坑，router-view不能渲染，花費(fèi)了好多時(shí)間終于發(fā)現(xiàn)了原因。

項(xiàng)目目錄結(jié)構(gòu)

其中main.js

import Vue from 'vue';
import App from './App';
import router from './router';

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 render: h => h(App)
});

app.vue

<template>
 <div id="app">
   <div class="tab">
    <div class="tab-item">
     <router-link to="/goods">商品</router-link>
    </div>
    <div class="tab-item">
     <router-link to="/ratings">評論</router-link>
    </div>
    <div class="tab-item">
     <router-link to="/seller">商家</router-link>
    </div>
   </div>
   <div>
    <router-view></router-view>
   </div>
 </div>
</template>

<script>
 export default {
  name: 'app',
  components: {

  }
 };
</script>

<style lang="stylus" rel="stylesheet/stylus">
 .tab
  display: flex
  width: 100%
  height: 40px
  line-height: 40px
  .tab-item
   flex: 1
   text-align: center
   & > a
    display: block
</style>

router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import goods from '../components/goods/goods.vue';
import ratings from '../components/ratings/ratings.vue';
import seller from '../components/seller/seller.vue';

Vue.use(VueRouter);

const routes = [
 { path: '/goods', component: goods },
 { path: '/ratings', component: ratings },
 { path: '/seller', component: seller },
 { path: '*', redirect: '/goods' }
];

const router = new VueRouter({
 routes: routes   //注意是routes而不是routers,坑就在這里
});

export default router;

其中在index.js中使用了各種方法，最后查看文檔發(fā)現(xiàn)原來是routes惹的禍，每次都寫的是routers，導(dǎo)致路由根本就沒有導(dǎo)入進(jìn)去，所以在渲染的時(shí)候一直不能顯示content。如下官方文檔中的例子：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue?keep-alive的實(shí)現(xiàn)原理分析
這篇文章主要介紹了Vue?keep-alive的實(shí)現(xiàn)原理分析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
關(guān)于pinia的簡單使用方式
這篇文章主要介紹了關(guān)于pinia的簡單使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
使用WebSocket+SpringBoot+Vue搭建簡易網(wǎng)頁聊天室的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用WebSocket+SpringBoot+Vue搭建簡易網(wǎng)頁聊天室的實(shí)現(xiàn),具體的步驟如下,需要的朋友可以參考下
2023-03-03
vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼
項(xiàng)目上有一個(gè)需求,頁面上有50、60個(gè)數(shù)據(jù)變量,是依次排序遞增的變量,中間有個(gè)別變量用不到,不想把這些變量直接定義在data() { }內(nèi),這篇文章主要介紹了vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼,需要的朋友可以參考下
2024-08-08
vue3獲取子組件的DOM元素的方法總結(jié)
在 Vue 3 中,訪問子組件的 DOM 元素是一個(gè)常見的需求,本文將介紹如何在 Vue 3 中使用不同的方法來獲取子組件的 DOM 元素,需要的朋友可以參考下
2023-08-08
Vue3使用sessionStorage保存會(huì)話數(shù)據(jù)的實(shí)現(xiàn)方式
在前端開發(fā)中,我們常常需要在用戶會(huì)話期間保存一些數(shù)據(jù),這些數(shù)據(jù)在頁面刷新或?qū)Ш綍r(shí)依然需要存在,sessionStorage 是一種非常方便的方式來實(shí)現(xiàn)這一點(diǎn),在這篇文章中,我們將探討如何在Vue3應(yīng)用中使用sessionStorage來保存會(huì)話數(shù)據(jù),需要的朋友可以參考下
2025-01-01
vue進(jìn)入頁面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過程
這篇文章主要介紹了vue進(jìn)入頁面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue3中動(dòng)態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序圖文詳解
在項(xiàng)目中,我們時(shí)常會(huì)遇到動(dòng)態(tài)的去綁定操作切換不同的CSS樣式,下面這篇文章主要給大家介紹了關(guān)于Vue3中動(dòng)態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
vue electron應(yīng)用調(diào)exe程序的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue electron應(yīng)用調(diào)exe程序的實(shí)現(xiàn)步驟,用Python寫了一個(gè)本地服務(wù)編譯成exe程序,在electron程序啟動(dòng)后,自動(dòng)執(zhí)行exe程序,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
2024-02-02
VUE解決圖片視頻加載緩慢/首屏加載白屏的問題
在 Vue3 項(xiàng)目中，有時(shí)候會(huì)出現(xiàn)圖片視頻加載緩慢、首屏加載白屏的問題，所以本文小編就給大家詳細(xì)介紹一下如何解決圖片視頻加載緩慢/首屏加載白屏的問題,需要的朋友可以參考下
2023-07-07