[Vuejs] 关于vue-router里面的subRoutes

刚学习vue，可能有使用不对的地方，希望没有对大家造成困扰！

使用vue-router，为了能够更好的管理.vue文件，需要用到子路由。

先看个错误的例子

routers.js

        '/company':{               //公司name:'company',component: function (resolve) {require(['./views/company/index.vue'], resolve);}, subRoutes: {'/about':{               //关于component: function (resolve) {require(['./views/company/about.vue'], resolve);}}}},

上面的代码会引起什么问题呢？原因没找到，主要出现的问题如下：

查了各种地方，都没有找到问题所在。后来自己再根据vue-router的官方文档，弄了一下，发现最关键点在于这里：

// 嵌套的路由'/c': {component: {// 渲染子视图template: '<router-view></router-view>'},subRoutes: {// 当路径是 /c/d 时进行渲染'/d': { component: { template: 'D' }},// 当路径是 /c/e 时进行渲染'/e': { component: { template: 'E' }}}}

貌似是主路由，渲染了，子路由没地方渲染。

最后的解决方法是：

        '/company':{               //公司name:'company',component: {template: '<router-view></router-view>'}, subRoutes: {'/':{               //关于component: function (resolve) {require(['./views/company/index.vue'], resolve);}},'/about':{               //关于component: function (resolve) {require(['./views/company/about.vue'], resolve);}}}},

如各位看到这篇文章，发现有误的地方，请多多交流

Have fun with Vuejs

[Vuejs] 关于vue-router里面的subRoutes相关推荐

支持外部链接跳转的 Vue Router 扩展实现
本文内容问题现状改进思路话题延伸本文小结众所周知,Vue Router 是 Vue 中重要的插件之一,特别是在当下流行的单页面应用/SPA 中,这种感觉会越来越明显.此时,路由的作用就是根 ...
vue里面的model
vue里面的model双向绑定,就是一种代码组合即语法糖,我们之前在实现功能的时候,父组件通过props向子组件里面传递参数,子组件处理完成之后,如果想将结果传回父组件的话,需要调用emit里面的自定 ...
VueJS 官方路由之 Vue Router
文章目录参考描述 Vue Router 获取 npm yarn 依赖问题使用 router-link router-view 配置路由插件基本结构子组件导入需要进行路由匹配的组件定义路由 ...
使用Vue里面的ref 控制DOM元素的样式marginleft，marginLeft的只是变化了，但是视图没有变化，求解答
使用Vue里面的ref 控制DOM元素的样式marginleft,marginLeft的只是变化了,但是视图没有变化,求解答 <template><div><div cl ...
Vue.js 从 Vue Router 0.7.x 迁移
从 Vue Router 0.7.x 迁移只有 Vue Router 2 是与 Vue 2 相互兼容的,所以如果你更新了 Vue ,你也需要更新 Vue Router .这也是我们在主文档中将迁移路 ...
Vue Router的详细教程
Vue Router的详细教程安装 #直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 ...
python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
你可能不清楚的 Vue Router 深度用法（一）
Vue Router 简单易上手,能实现大部分的需求.但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容.第一章为路由元信息用途挖掘. 路由元信息用途 ( ...
Vue Router 4.0 正式发布！焕然一新。
关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习 12月8日,Vue Router 4 正式发布稳定版本. 在经历了 14 个 Alph ...

[Vuejs] 关于vue-router里面的subRoutes

[Vuejs] 关于vue-router里面的subRoutes相关推荐

最新文章

热门文章