vue的路由与es6的import, export

vue主要用来实现前端模块化编程，

它的最终代码是一些序列化的js,简单的index.html访问入口，和一些image,

vue的js使用es6来模块化设计，

 

为什么要这么做呢，我想主要是为了前端与后端交互变为纯数据，做分离，变成只有api的通讯

当然你也可以用其它方法来实现这个目的，不过vue应该是有对前端数据进行一些压缩，优化，

再者，它可以用es6来模块化（动态编程，模块引用之类，），

vue还有什么双向绑定，监视watch之类，，，总是就是学习成本有点高，，用顺手了，维护成本会降低不少，

 

－－－－－－－－

es6的import，引入js，或vue，，，，其实文件估计也可以，

（可以忽略文件扩展，，，感觉这是个缺点，看着很乱）

import    aaa   from   '@/components/list111'    //aaa表示一个引用名称，@应该是指src目录吧，，，其他也可以使用相对

相对目录，如，../，表示上级，等等

export输出是指es6的输出，而import可以不是es6如vue,

export输出的东西似乎可以是所有的数据类型实体，

如export default a12  //var a12="a12"

如export default [{},{}] //包含两个对象的数组

 

而，import aaa1 from  '@/components/aaa1.vue'　　，则是引入一个vue模板，引完它会做些替换或嵌套之类的，

vue使用<template><一个元素>...</一个元素></template>，，，这种用法好像比较多，

 

vue的路由，是一个数组构造的，Router，对象，在　/Router/index.js，被定义，所以我认为其他路由的关联也是由这里去扩展的，

思路：

引入其他路径的js，如 /Router/mall/index.js，该js里可以定义其下的路由

再在　/Router/index.js　import  /Router/mall/index.js   ，把路由构成　新数组，并 export

/router/mall/

 

import mall_index from '../../view/mall/index.vue'
import mall_goodslist from '../../view/mall/goodslist'  //不加扩展名也可以

export default [
  {
    path:'/mall',
    component:mall_index
  },
  {
    path:'/mall/index',
    redirect:'/mall'
  },
  {
    path:'/mall/goodslist',
    component:mall_goodslist
  },
];

　　

/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld1'
import mall_index from './mall'
Vue.use(Router)

var def_route = [{
  path: '/',
  name: 'HelloWorld1',
  component: HelloWorld
}]

var ext_routers=[mall_index]
ext_routers.forEach(aa=>{
  aa.forEach(ele=>{def_route.push(ele)})
})

export default new Router({
  routes: def_route
})

 /src/view/mall/goodslist.vue

<template>

<div>

mall-goodslist.vue

</div>

</template>

  /src/view/mall/index.vue

<template>

<div>

asdfsd-mall-index

</div>

</template>

d4

 

 

 

--------------

vue-router的children

{

    path:"/mall",

    component:layout,

    children:[

    {

       path:"list",

       component:t01_component,

    }

    ]

}

--------------

vue的格式化和js的格式化（vscode里，快捷键，ctrl+shift+f，vetur的插件）

／／这配置，vetur.format.defaultFormatter.html 值修改成  js-beautify-html ,而在none时不格式化vue

常用插件：１。auto rename tag（auto rename paired html/html tag，不懂做啥）

２。eslint（这个好像是强制约束检查的），３。path intellisense（不懂做啥），４。vetur（格式化）

５。vscode-icons（文件图标主题等，感觉效果很好）／／颜色主题，dark + default,,,,

 --------------

说起来，vue就是要把静态的东西都搬到客户端去运行，包括一个视窗到另一个视窗的ui，且它们的url不同也包含其中，

（其实url是相同的，因为#号后面不同是用于vue的路由，），这个api就可以单独的做响应数据，而且可以支持多平台，如android,ios等

------

由于它把视窗都放客户端，后端做数据支持，这样它应该没有seo可行了，所以只能是做管理后台程序吧，

------

vue的template，里只许一个单元素吗，多个是不行，如

//正确
<template>
  <div>
    例1
  </div>
</template>

//错误
<template>
  <div>
    例２
  </div>
  <div>
    增加并行两个div，不行
  </div>
</template>

//正确
<template>
  <div>
    例２
    <div>
      增加嵌入的div，行
    </div>
  </div>
</template>

------

vue-router： 嵌套路由  https://blog.csdn.net/github_26672553/article/details/54861174

 

d