解决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',
 routes: [
 {
   path: '/recom',
   component: recom,  //引入recom,必不可少
   children: [
    {
     path: 'view',
     name: 'recomView',
     component: recomView
    },
    {
     path: 'edit',
     name: 'recomEdit',
     component: recomEdit
    }
   ]
  },
  
export default router

解决vue-router 嵌套路由没反应的问题

扫一扫手机访问