vue 同一个页面路由无反应_解决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理要有,修改下：

{

path:'course',

component:Course

children:[{

path:'list',

component:CourseList

},{

path:'content',

component:CourseContent

}

]

},

Course.vue如下：

这样就可以实现嵌套了。想想，本例子中，其实App组件也是这样的，他提供了个，对不对？

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两个组件导入，

……

……

……

this.$router.push('/recom/view')

this.$router.push('/recom/edit')

……

然而使用上面的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就可以了

那还有没有更简单的不需要建立recom.vue方法呢？有。

在index.js中直接引入const recom = {template: ``}就行了。修正后的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

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

那还有没有其他的办法呢？也有。那就是不要用嵌套路由，直接把子路由升到跟父路由同级就行了，反正你这里又不需要父路由对应的组件，然后给父路由设置一个redirect指向你想默认显示的页面，这个相信都会，就不写了。这也是我一开始想到的办法，但是上面的bug没解决心里不舒服，所以耽误了点时间，不过还好，勉强算是找到原因了。

感觉JS是个很灵活的语言，像我这种半路出家什么书都没看直接开始做web的，真的要抽时间好好补补基础了。

以上这篇解决vue-router 嵌套路由没反应的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。