解決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 巢狀路由沒反應的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。