解决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生成的html出现样式问题的解决方法
Apr 16 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
js实现常见的工具条效果
Mar 02 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
js实现复制粘贴的两种方法
Dec 04 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
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
canvas时钟效果
2017/02/16 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
React中的render何时执行过程
2018/04/13 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
Python的time模块中的常用方法整理
2015/06/18 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
英语自荐信范文
2013/12/11 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
高中生操行评语
2014/04/25 职场文书
个人欠款担保书
2014/05/20 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
辞职信如何写
2015/02/27 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers