解决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 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
javascript定义函数的方法
2010/12/06 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
python开发简易版在线音乐播放器
2017/03/03 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
PHP如何自定义函数
2016/09/16 面试题
小学毕业家长寄语
2014/01/19 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android