一、路由
这两天移动端的同事在研究vue,跟我说看着我的项目做的,子路由访问的时候是空白的,我第一反应是,不会模块没加载进来吧,还是。。。。此处省略一千字。。。
废话不多说上代码
路由代码
{ path: '/list', name: '列表', component: Layout, meta: {title: '列表', icon: 'service'}, redirect: '/orderManger', children: [{ path: '', name: '主列表', component: List }, { path: '/orderManger', name: '订单管理', component: OrderManger }] }
element的菜单组件
<!--一级菜单--> <el-submenu v-for="(item, index) in rounters" :key="index" :index="item.path" v-show="!item.hidden"> <template slot="title"> <i v-if="item.meta" :class="'el-icon-'+ item.meta.icon"></i> <i v-else :class="el-icon-menu"></i> <span>{{item.name}}</span> </template> <!--二级菜单--> <el-menu-item v-for="(childItem, index) in item.children" :key="index" :index="childItem.name" :route="item.path + childItem.path" v-if="!childItem.hidden" > <span class="second_menu_title" slot="title">{{childItem.name}}</span> </el-menu-item> </el-submenu>
问题描述:1、根据以上代码访问list路由时访问列表组件
2、点击订单管理菜单,地址栏地址显示正确的,但是页面渲染为空白
看到代码第一反应是children里的子路由以斜线“”/“”开头了,记得以前踩过这个坑,好像说的是子路由以斜线开头表示绝对路径了,但是当时没记录,年纪大了记性不好,后面就忘了。。。。。(吸取教训,在哪里跌倒,就要在哪里做个标记。。。)
言归正传,后面仔细又去查了下,
如果路由以“/”开头,那么他会作为根路径进行渲染,也就是一层路由。
如果地址不是/开头,会直接替换当前路由的最后一个/后的地址
所以按照以上的代码的写法,要想访问订单管理的模块应该是在http://localhost:8080/#/orderManger路由下
果然,始终不露面的订单管理页面出来了,但。。。这不是我们想要的。。。。
我们想要的是/list/orderManger
根据上面对斜线/“”的理解修改如下
路由代码:
菜单拼接修改:
那么:现在正常访问了!
二、VUE模块导入不加.vue后缀
Failed to mount component: template or render function not defined.
found in
解决方法:加上.vue后缀
原因:先记录下来,忙过这段儿研究下。。。。。