解决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 相关文章推荐
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
React key值的作用和使用详解
Aug 23 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
javascript Canvas动态粒子连线
Jan 01 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
Vue数据绑定简析小结
2019/05/07 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
Pandas 同元素多列去重的实例
2018/07/03 Python
python实现顺序表的简单代码
2018/09/28 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
python设置随机种子实例讲解
2019/09/12 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
python实现logistic分类算法代码
2020/02/28 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
大学毕业生通用自我评价
2014/01/05 职场文书
市级文明单位申报材料
2014/05/07 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
社区植树节活动总结
2015/02/06 职场文书
社会实践单位意见
2015/06/05 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android