2018-07-18admin后台系统问题

项目是做个支付后台管理系统
使用vue-cli
遇到的问题
一、嵌套路由出现路径重叠

// 基本模式 一个路由里面有一个链接控制内路由的展示
<router-view>
  <router-link to="/xxx">xxx</router-link>
  <router-view></router-view>
</router-view>

描述例如当前页是www.example.com,点击<router-link>xxx</router-link>,router.js对应路径中为

<router-link v-if="hasOneShowingChildren(item.children,index)" :to="item.path+'/'+item.children[0].path">
  <el-menu-item v-if="hasOneShowingChildren(item.children,index)" :key="item.name" :index="item.path+'/'+item.children[0].path" >{{item.children[0].name}}</el-menu-item>
</router-link>

    {
      path: '/merchant',
      name: 'merchant',
      redirect: 'noredirect',
      component: Layout,
      // component: (resolve) => {
      //   require(['@/views/menu-1/menu-1-1.vue'], resolve)
      // },
      children: [
        {
          path: 'merchant-info',
          component: (resolve) => {
            require(['@/views/merchant/merchant-info.vue'], resolve)
          },
          name: 'menu-1-1'
        }
      ]
    },

结果会变成www.example.com/#/merchant/merchant/merchant-info
解决 不使用router-link，用this.$router.push方法，当就去写简单的demo时却可以，应该是自己的router.js和router数据路径写的有问题，待验证
----更新7-22--------
今天在解决其他问题的时候，直接copy了参考模板的代码，发现可以使用。我一开始自己写路由是在<sidebar-item>中v-for遍历的,而参考模板是<sidebar-item v-for="route in routes">在<sidebar-item>中会递归在对route的子路径再遍历,达到遍历所有子节点路径，这时候router-link则可以作用
二、@import '@/.../xxx/styl'导入styl到组件报错
在main.js全局导入也不得，待解决
----更新7-22-------
在css路径中是不能使用@ alias的
全局引用，例如引入varablies.styl应该这样做在build/utils.js中

// 在generateLoaders方法的后面!后面！后面！(说三遍呀！)定义如下变量
const stylusOptions = {  
  import: [     path.join(__dirname, "../src/assets/css/variables.styl")   ],   
  paths: [     
    path.join(__dirname, '../src/assets'),     
    path.join(__dirname, '../')   
  ] 
}
// 在紧接着的return返回值中进行配置
return {   
  css: generateLoaders(),   postcss: generateLoaders(),   
  less: generateLoaders('less'),   
  sass: generateLoaders('sass', { indentedSyntax: true }),   
  scss: generateLoaders('sass'),   
  stylus: generateLoaders('stylus', stylusOptions),   
  styl: generateLoaders('stylus', stylusOptions) 
}