zoukankan      html  css  js  c++  java
  • [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

  • 相关阅读:
    Java中static、final、static final的区别(转)
    常见 重要知识精简总结
    面向对象编程三大特性------封装、继承、多态
    解决点击输入框调起键盘时,输入框被键盘遮挡的问题
    实用连接
    媒体查询兼容IE浏览器
    拖动到回收站删除
    vue2.0--组件通信
    图片上传
    上传图片预览
  • 原文地址:https://www.cnblogs.com/davidhhuan/p/5523884.html
Copyright © 2011-2022 走看看