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


Posted in Javascript onSeptember 22, 2020

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

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

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

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

Javascript 相关文章推荐
jquery图片上下tab切换效果
Mar 18 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
Js跳出两级循环方法代码实例
Sep 22 #Javascript
vue 二维码长按保存和复制内容操作
Sep 22 #Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 #Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 #Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 #Javascript
小程序实现录音功能
Sep 22 #Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 #Javascript
You might like
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
node.js require() 源码解读
2015/12/13 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
python3.0 字典key排序
2008/12/24 Python
深入理解Python中的内置常量
2017/05/20 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
运动会入场式解说词
2014/02/18 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
工作散漫检讨书
2014/09/16 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
检讨书格式
2019/04/25 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python