时间:2021-05-18
先看下route.js
//route.jsconst 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:Coursechildren:[{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)//建立routerconst 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>`}//建立routerconst 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 嵌套路由没反应的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vuerouter路由嵌套不显示问题的解决方法,具体内容如下路由嵌套,vue2.0router中嵌套路由不成功,如何解决?我先说下我的需求,例如下图我本来是想打
前言:前面我们把动态路由、嵌套路由等讲完了,说道完命名路由和命名视图,vue-router的基本使用方法就算是完篇了,还想仔细探究的同学可以去官网翻阅,加深理解
Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案。在使用Vue-router时候,我们常常会使用其自带的路径跳转组件Li
Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案。在使用Vue-router时候,我们常常会使用其自带的路径跳转组件Li
一、安装1、安装路由vue-router:npminstallvue-routervue项目的依赖文件node_modules存在vue-router依赖,说明