快捷導(dǎo)航

解決vue-router 嵌套路由沒(méi)反應(yīng)的問(wèn)題

更新時(shí)間：2020年09月22日 09:55:09 作者：小蟲(chóng)1

這篇文章主要介紹了解決vue-router 嵌套路由沒(méi)反應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

先看下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

當(dāng)你訪問(wèn)的時(shí)候，發(fā)現(xiàn)

http://localhost:8080/#/login

http://localhost:8080/#/class

都正常，但是：

http://localhost:8080/#/course/list

http://localhost:8080/#/course/content

都是一片空白，檢查元素，發(fā)現(xiàn)沒(méi)有加載過(guò)來(lái)。檢查，子路由前面并沒(méi)有加/,所以這沒(méi)有問(wèn)題，排除。

其實(shí)這是list的父級(jí)course沒(méi)有component，有了componnet,并且需要在這個(gè)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>

這樣就可以實(shí)現(xiàn)嵌套了。想想，本例子中，其實(shí)App組件也是這樣的，他提供了個(gè)<router-view></router-view>，對(duì)不對(duì)？

http://localhost:8080/#/course/list

http://localhost:8080/#/course/content

都可以訪問(wèn)了。

補(bǔ)充知識(shí)：關(guān)于Vue-router子路由不顯示的一個(gè)坑

遇到這個(gè)問(wèn)題的基本上應(yīng)該跟我遇到的情況一樣，但是這個(gè)問(wèn)題很隱蔽，老手不會(huì)遇到，新人說(shuō)不清楚，所以爬坑之后來(lái)提一下。

父子路由是嵌套關(guān)系，所以不能跳過(guò)父組件直接顯示子組件。例如我有如下index.js:``

import Vue from 'vue'
import VueRouter from 'vue-router'

//引入兩個(gè)組件
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方式暴露出的模塊在導(dǎo)入時(shí)可以起任何名（不沖突的情況下）
export default router

在某個(gè)組件XXX.vue中，我想把recomView和recomEdit兩個(gè)組件導(dǎo)入，

<template>
……
<router-view></router-view>
……
</template>

<script>
……
this.$router.push('/recom/view')
this.$router.push('/recom/edit')
……
</script>

然而使用上面的index.js，會(huì)發(fā)現(xiàn)無(wú)論如何也無(wú)法引入。原因在于引入的時(shí)候跳級(jí)了?；仡^看上面index.js，不妥之處很多，慢慢分析一下

父級(jí)路由'/recom'沒(méi)有對(duì)應(yīng)的component，導(dǎo)致XXX.vue中的router-view沒(méi)有對(duì)應(yīng)的組件，所以此時(shí)頁(yè)面中你想顯示recomView或者recomEdit的地方會(huì)是空白

假如此時(shí)把'/recom'處添加component，為方便直接給component: recomView,會(huì)發(fā)現(xiàn)你原本指向recomView和recomEdit的兩個(gè)路由都會(huì)顯示recomView

那么問(wèn)題就清楚了，其實(shí)就是給的路由跳級(jí)了：父子路由是一個(gè)兩層的嵌套關(guān)系，而最上層組件中的router-view只會(huì)指向我們這里的父級(jí)路由，也就是'/recom'，要想指向子路由，那就要再嵌套一層

到這里，解決方法就比較容易想到了，那就是再建立一個(gè)組件recom.vue對(duì)應(yīng)父級(jí)路由，在recom.vue中再引入一次router-view就行了。

//recom.vue，鑒于我這里并不需要這個(gè)'/recom'頁(yè)面，所以以最簡(jiǎn)單的方式引入router-view就可以了
<template>
 <router-view></router-view>
</template>

那還有沒(méi)有更簡(jiǎn)單的不需要建立recom.vue方法呢？有。

在index.js中直接引入const recom = {template: `<router-view></router-view>`}就行了。修正后的index.js應(yīng)該是這樣的：

import Vue from 'vue'
import VueRouter from 'vue-router'

//引入兩個(gè)組件
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',
 routes: [
 {
   path: '/recom',
   component: recom,  //引入recom,必不可少
   children: [
    {
     path: 'view',
     name: 'recomView',
     component: recomView
    },
    {
     path: 'edit',
     name: 'recomEdit',
     component: recomEdit
    }
   ]
  },
  
export default router

那還有沒(méi)有其他的辦法呢？也有。那就是不要用嵌套路由，直接把子路由升到跟父路由同級(jí)就行了，反正你這里又不需要父路由對(duì)應(yīng)的組件，然后給父路由設(shè)置一個(gè)redirect指向你想默認(rèn)顯示的頁(yè)面，這個(gè)相信都會(huì)，就不寫了。這也是我一開(kāi)始想到的辦法，但是上面的bug沒(méi)解決心里不舒服，所以耽誤了點(diǎn)時(shí)間，不過(guò)還好，勉強(qiáng)算是找到原因了。

感覺(jué)JS是個(gè)很靈活的語(yǔ)言，像我這種半路出家什么書都沒(méi)看直接開(kāi)始做web的，真的要抽時(shí)間好好補(bǔ)補(bǔ)基礎(chǔ)了。

以上這篇解決vue-router 嵌套路由沒(méi)反應(yīng)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: