解決vue-router 巢狀路由沒反應的問題
先看下route.js
//route.js const App = () => import('../App.vue'); const Login = () => import('../component/Login.vue'); const Class = () => import('../component/Class.vue'); const CourseList = () => import('../component/CourseList.vue'); const CourseContent = () => import('../component/CourseContent.vue'); const routers = [{ path:'/',component:App,children:[{ path:'login',component:Login },{ path:'class',component:Class },{ path:'course',children:[{ path:'list',component:CourseList },{ path:'content',component:CourseContent } ] },] }] export default routers
當你訪問的時候,發現
http://localhost:8080/#/login
http://localhost:8080/#/class
都正常,但是:
http://localhost:8080/#/course/list
http://localhost:8080/#/course/content
都是一片空白,檢查元素,發現沒有載入過來。檢查,子路由前面並沒有加/,所以這沒有問題,排除。
其實這是list的父級course沒有component,有了componnet,並且需要在這個component理要有<router-view></router-view>,修改下:
{ path:'course',component:Course children:[{ path:'list',component:CourseList },{ path:'content',component:CourseContent } ] },
Course.vue如下:
<template> <div> <router-view></router-view> </div> </template>
這樣就可以實現嵌套了。想想,本例子中,其實App元件也是這樣的,他提供了個<router-view></router-view>,對不對?
http://localhost:8080/#/course/list
http://localhost:8080/#/course/content
都可以訪問了。
補充知識:關於Vue-router子路由不顯示的一個坑
遇到這個問題的基本上應該跟我遇到的情況一樣,但是這個問題很隱蔽,老手不會遇到,新人說不清楚,所以爬坑之後來提一下。
父子路由是巢狀關係,所以不能跳過父元件直接顯示子元件。例如我有如下index.js:``
import Vue from 'vue' import VueRouter from 'vue-router' //引入兩個元件 import recomView from '../components/views/ty/recom/view.vue' import recomEdit from '../components/views/ty/recom/edit.vue' Vue.use(VueRouter) //建立router const router = new VueRouter({ mode: 'history',routes: [ { path: '/recom',children: [ { path: 'view',name: 'recomView',component: recomView },{ path: 'edit',name: 'recomEdit',component: recomEdit } ] },//暴露router,export default方式暴露出的模組在匯入時可以起任何名(不衝突的情況下) export default router
在某個元件XXX.vue中,我想把recomView和recomEdit兩個元件匯入,
<template> …… <router-view></router-view> …… </template> <script> …… this.$router.push('/recom/view') this.$router.push('/recom/edit') …… </script>
然而使用上面的index.js,會發現無論如何也無法引入。原因在於引入的時候跳級了。回頭看上面index.js,不妥之處很多,慢慢分析一下
父級路由'/recom'沒有對應的component,導致XXX.vue中的router-view沒有對應的元件,所以此時頁面中你想顯示recomView或者recomEdit的地方會是空白
假如此時把'/recom'處新增component,為方便直接給component: recomView,會發現你原本指向recomView和recomEdit的兩個路由都會顯示recomView
那麼問題就清楚了,其實就是給的路由跳級了:父子路由是一個兩層的巢狀關係,而最上層元件中的router-view只會指向我們這裡的父級路由,也就是'/recom',要想指向子路由,那就要再巢狀一層
到這裡,解決方法就比較容易想到了,那就是再建立一個元件recom.vue對應父級路由,在recom.vue中再引入一次router-view就行了。
//recom.vue,鑑於我這裡並不需要這個'/recom'頁面,所以以最簡單的方式引入router-view就可以了 <template> <router-view></router-view> </template>
那還有沒有更簡單的不需要建立recom.vue方法呢?有。
在index.js中直接引入const recom = {template: `<router-view></router-view>`}就行了。修正後的index.js應該是這樣的:
import Vue from 'vue' import VueRouter from 'vue-router' //引入兩個元件 import recomView from '../components/views/ty/recom/view.vue' import recomEdit from '../components/views/ty/recom/edit.vue' Vue.use(VueRouter) //引入recom元件! const recom = { template: `<router-view></router-view>` } //建立router const router = new VueRouter({ mode: 'history',component: recom,//引入recom,必不可少 children: [ { path: 'view',export default router
那還有沒有其他的辦法呢?也有。那就是不要用巢狀路由,直接把子路由升到跟父路由同級就行了,反正你這裡又不需要父路由對應的元件,然後給父路由設定一個redirect指向你想預設顯示的頁面,這個相信都會,就不寫了。這也是我一開始想到的辦法,但是上面的bug沒解決心裡不舒服,所以耽誤了點時間,不過還好,勉強算是找到原因了。
感覺JS是個很靈活的語言,像我這種半路出家什麼書都沒看直接開始做web的,真的要抽時間好好補補基礎了。
以上這篇解決vue-router 巢狀路由沒反應的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。