2019-01-18

命名视图

有的时候有的页面需要左侧的菜单栏或者头部，但是有的页面不需要，那么该如何根据不同的页面是否显示左侧的菜单栏呢。想一想我们设置每个页面的title的时候，都在定义路由的时候设置的，所以能不能在meta中新添加一个属性，通过该属性来判断是都显示菜单呢。

首先在router.js中配置路由

{
  name: 'super',
  path: '/super',
  meta: {title: '超管首页', showMenu: false},
  component: resolve => {require.ensure(['../pages/superAdmin/super.vue'], () => {resolve(require('../pages/superAdmin/super.vue'))})}
},
{
  name: 'card',
  path: '/card',
  meta: {title: '景区名片', showMenu: true, href: '/card'},
  component: resolve => {require.ensure(['../pages/card/card.vue'], () => {resolve(require('../pages/card/card.vue'))})}
}，

我们在meta对象中新增加属性showMenu，需要左侧菜单栏的时候设置false,不需要时设置为true,那么我们的app.vue是这样的

<!-- 左侧 -->
<div  class="main-left-menu" v-if="$route.meta.showMenu">
  <div v-for="(menu, index) in menuList" :key="index" :class="['tab-left', {active: hrefStr == menu.href}]" @click="showList(menu, index)">{{menu.name}}</div>
</div>

<!-- 内容区域 -->
<div :class="{'main-body': $route.meta.showMenu}">
  <template>
    <router-view></router-view>
  </template>
</div>

我们通过判断路由的meta的showMenu属性判断是否加载菜单

定义css样式

.main-left-menu{
  position: absolute;
  top:60px;
  bottom: 0;
  width: 240px;
  background:#3D436A;
  overflow: auto;
  .tab-left {
    font-size: 20px;
    line-height: 20px;
    padding:10px;
    color: #fff;
    margin-bottom: 10px;
    cursor: pointer;	
  }
  .active {
    background: #49507C;
  }
}
.main-body{
  position: absolute;
  left: 240px;
  top:60px;
  right: 0;
  bottom: 0;
  background:#eee;
  overflow: auto;
}

从上边的css可以看出，那么被选中的tab页签，改变样式并跳转路由，首次进入的时候，我们通过当前的href来判断到底是哪个页面，渲染视图，那么需要定义一个左侧菜单栏的循环数组，数组如下：

 menuList: [
  {
    name: '景区名片',
    href: '/card'
  },
  {
    name: '景区相册',
    href: '/photo'
  },
  {
    name: '旅游服务机构',
    href: '/org'
  }
]

能看出定义的href属性恰恰就是router.js中的路由地址，然后我们通过当前的地址（location.href）判断是哪个路由，添加active类，mounted代码如下：

1 2	let href = location.href.substring(location.href.lastIndexOf('#')+1) this.hrefStr = href

然后点击左侧的菜单切换路由，添加一个方法为：

showList (menu, index) {
  this.hrefStr = menu.href
  this.$router.push({path: menu.href})
}

别以为完事了哦，有一个坑就是，如果用浏览器的回退按钮时，会发现，虽然页面跳转了，但是左侧菜单的状态并没有改变，只有刷新的时候才可以，所以才需要添加一个监听

watch: {
  '$route.meta.href' (val) {
    this.hrefStr = val
  }
}

这下就完美了，最后来一张效果图：
1.命名视图

2019-01-18

微信朋友圈全文、收起功能实现

需求是这样的，一个列表页，每个条目最多只显示两行文字，超过两行显示省略号，并显示向下箭头，点击箭头展示全部内容。

刚接触这个需求的时候，也想了几种方案，如果用字符长度来判断是否显示箭头和省略号是最简单的，但是体验一定不好，首先手机屏幕的大小不确定，每个不同型号的手机一行显示多少个字符不确定，再加上有英文单词和数字的时候就更不能确定了。

css3里边有一个-webkit-line-clamp:2;这样的一个属性，当然也要搭配一些其他的属性。

那么就算是超过部分用省略号代替已经解决了，那么点击箭头展示全部怎么解决呢，动态改变css样式，那么一定需要一个状态值来判断，这个状态值就由js来做吧。这是初步想法。

看一下实现后的样子：
1.list列表

① 可以看到若是文字超过两行显示向下的箭头，省略号代替其他部分
② 若文字没有超过两行不显示箭头不显示省略号
③ 点击向下的箭头，显示该条的全部内容，箭头向上，点击向上箭头收起内容

那么现在我们看到是一个列表，布局就用ul li，因为列表里边既有一行的时候也有两行的时候，所以我给了li一个padding，然后里边放一个div，这个div里边包括文字和箭头。所以html是这样写的：

<ul>
  <li :class="{'limit': item.state}" ref="li" v-for="(item, index) in zcList.data" @click.stop="zcNameC(item)" :key="index">
    <div :class="['content', {'content-limit': item.state}]">
      <div class="content-msg">{{item.content}}</div>
      <span v-if="moreArr[index]" :class="item.state ? 'arrowdown': 'arrowtop'" @click.stop="deploy(item, index)"></span>
    </div>
  </li>
</ul>

对应的css样式是这样的：

li {
  padding: 10px 15px 10px 0;
  position:relative;
  font-size: 1.5rem;
  text-align: left;
  line-height: 2.4rem;
}
.limit {
  max-height: 70px;
  overflow: hidden;
  text-overflow:ellipsis; 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;    
}
.content{
    width: 100%;
    position: relative;
}
.content-limit{
  max-height: 50px;
  overflow: hidden;
}
.content-msg{
  padding-right: 44px;
}
.arrowdown{
  background: url("../assets/down.png") no-repeat;
  background-size: 10px 6px;  
}
.arrowtop{
  background: url("../assets/top.png") no-repeat;
  background-size: 10px 6px;  
}

可以看出来我们需要两个变量，一个moreArr数组来判断是否显示箭头，一个是每一个条目有一个箭头的状态是向上还是向下，项目太久，现在想完全可以使用一个状态来判断是否显示箭头。

js代码如下：

setTimeout(() => {
  let lis = document.getElementsByClassName('content-msg')
  for (let i = 0; i < lis.length; i++) {
    if (lis[i].offsetHeight / 24 > 2) {
      this.moreArr.push(true)
      this.$set(this.zcList.data[i], 'state', true)
    } else {
      this.moreArr.push(false)
    }
  }
})

首先我们需要判断当前每个条目是否超过了两行，因为每行字有一行高，那么可以用包裹文字的div的高度除以每行字的行高，24px是每一行字的行高，若是大于2(依情况而定)，那么需要给当前对象添加箭头，那么就在moreArr中添加一个true，并且将列表项添加state属性并为true

注意：一定要加setTimeout或者nextTick，先请求接口才能去获取包裹文字的div不然获取不到。因为我在请求接口的时候使用async await 将请求接口变成异步操作了，所以要把上边的方法变成异步的

那么点击箭头的时候就改变state的状态就好了，代码如下

deploy (item, index) {
  if (item.hasOwnProperty('state')) {
    item.state = !item.state
  }
}

那么有了这个经验来写微信的全文查看以及收起全文就简单很多了，先看一下效果
2.朋友圈样式模仿

左边的图是没有点开全文的时候，右边是点开的时候。这个是类似于朋友圈的功能，上拉加载下一页，所以在请求接口后都要计算再次渲染的条目的高度。

<div :class="['con-outer',{'con-box': li.state} ]">
  <p class="content-msg" v-html="$options.filters.toHtml(li.content)"></p>
</div>
<div><span v-show="moreArr[li.id]" class="btn-show" @click.stop="deploy(li,index)">{{li.state ? '全文':'收起'}}</span></div>

.con-outer{
    position:relative;
    font-size: 15px;
    color: #666666;
    line-height: 21px;
    word-break:break-all;
    text-align: justify;
    padding-left: 15px;
}
.con-box{
  max-height: 104px;
  overflow: hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

getStatus () {
  setTimeout(() => {
    let lis = document.getElementsByClassName('content-msg')
    for (let i = 0; i < lis.length; i++) {
      let item = this.list[i]
      if (!item.state) {
        if (lis[i].offsetHeight / 21 > 5.1) {
          this.$set(item, 'state', true)
        } else {
          this.$set(item, 'state', false)
        }
        this.moreArr[item.id] = item.state
      }
    }
  })
}

嗯哼，有分页，所以想每次添加state的状态的时候就只遍历新增加的条目，然而踩了好多坑。其实这个项目做了太久了快两年了，不记得当时踩了哪些坑然后这样写了，最近有同事问起来，所以想着总结一下

2019-01-15

map方法

1.返回新数组

map和forEach都是遍历数组中的每一项，某种意义上告别了for循环。map与forEach支持三个参数，分别为item（数组中的每一项），index（每一项在数组中的索引），arr（数组本身），参数顺序不能错。map与forEach不同的是map遍历数组可以有返回值，如：
1.map遍历数组

遍历数据，将每一项除以2，并返回，这时候打印发现是一个新的数组，这个新数组由原数组元素对应的回调函数的返回值构成。若没有返回值，则新数组的所有元素为undefined。虽然返回一个新的数组，但是并不会覆盖原数组。
用同样的方法，用forEach试一遍：
2.forEach遍历数组
这时候打印就是undefined了，也就是说forEach只是数组中的每一项。

2.替换原数组

我们可以通过map返回一个新的数组的特性，替换原来数组，如：
3.利用map返回新数组

3.改变键值(key)

如果我们封装类似于下拉框的组件，根据不同配置调用不同的接口，组件中双向绑定的键值是不会变的，不然也达不到封装组件的意义了。那么获取人员列表的时候后端返回username，userId，获取部门列表的时候返回partname，partId，那么根据组件的要求，我们要将字段名称改成label与value。
如果说只需要用label与value的话，那么可以写成：

1	this.list = data.map(({id, name}) => ({label: name, value: id}))

先将map中的item进行解构，箭头函数若省略return的话加一个()。那么上边写的是你已经确定后端一定会返回id，name的时候，上边说的场景是后端接口返回的key是不确定的，所以我们需要写一个方法。

1
2
3

changeFieldName (name1, name2, arr) {
  this.list= arr.map((item) => ({label: item[name1], value: item[name2]}))
}

2018-12-29

主子路由你想不到的用处

vue是单页面应用，只有一个跟组件App.vue，在index.js入口文件中引用需要的一些组件并把app.vue根组件渲染在index.html中。我是这样理解的,app.vue、index.html和index.js之间的关系的。我们会看到app.vue中只有一个，每次跳转理由只是加载不同的组件而已。会遇到一个场景，比如有一个新闻列表页，点进去一条新闻，那么我们希望返回的时候，页面还会在我刚才点进去那条的状态，但是组件切换一定不能保存状态，当然可以使用虽然有了这个组件，但是你不知道你什么时候会遇到坑，那不妨试试路由的方式吧。

主子路由又叫嵌套，一个路由嵌套另一个路由，被嵌套的路由为子路由。当一个模板中与子路由有很多相似的地方的时候可以使用主子路由的形式。首先需要在主路由组件中添加渲染模板
,在路由index.js文件中配置子路由

{
  name: 'success',
  path: '/success',
  meta: {title: '成功页面', keepAlive: true},
  component: resolve => {require.ensure(['../pages/success/success.vue'], () => {resolve(require('../pages/success/success.vue'))})},
  children: [{
    path: '/success1',
    meta: {title: '成功页面1', keepAlive: true},
    component: resolve => {require.ensure(['../pages/success/success1.vue'], () => {resolve(require('../pages/success/success1.vue'))})},
  }]
}

在主路由中添加children属性，在该属性下配置子路由，最后在主路由跳转的时候，写法如下：

1	this.$router.push(`${this.$route.fullPath}/success1`)

通过this.$route下的fullPath属性主组件的路由并拼接子路由的地址，访问子路由的时候一定是加上主路由的地址。在子组件中改变了主组件中的变量，我们可以通过this.$parent.par的方式获取在主路由组件中定义的变量，不用通过路由进行将传递进行传递。并且通过主子路由的方式进行跳转，可以直接通过.this.$route.back()的方式直接回到主路由。
注意：如果路由1嵌套了路由2，路由2嵌套了路由3，那么被嵌套的子路由就直接在它的主路由中进行配置就行了，如下：

{
  name: 'success',
  path: '/success',
  meta: {title: '成功页面', keepAlive: true},
  component: resolve => {require.ensure(['../pages/success/success.vue'], () => {resolve(require('../pages/success/success.vue'))})},
  children: [{
    path: '/success1',
    meta: {title: '成功页面1', keepAlive: true},
    component: resolve => {require.ensure(['../pages/success/success1.vue'], () => {resolve(require('../pages/success/success1.vue'))})},
    children: [{
      path: '/success2',
      meta: {title: '成功页面2', keepAlive: true},
      component: resolve => {require.ensure(['../pages/success/success1.vue'], () => {resolve(require('../pages/success/success2.vue'))})}
    }]
  }]
}

2018-12-05

vue-resource怎么写服务类

vue-resource可以基于全局的Vue对象使用http（vue.http），也可以基于某个Vue实例使用http(this.$http)。
基于全局Vue对象使用http

1 2	Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

在一个Vue实例内使用$http

1 2	this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

两种场景使用

场景一基于全局对象使用http（vue.http）

1	Vue.$http.get('/static/address/address.json').then(res => { let list = res.body })

上边是请求本地的json文件，then方法中传入一个参数，响应成功时将返回的数据传到本地的数组中，response.body为返回的请求体。
在实际项目开发过程中，用到的也是全局的，如下所示：

1	let res =await $http.get('/static/address/address.json', {params: param}).then(res => res.json)

会发现没有写vue和this，但是事实是项目中对vue-resource进行了封装，所以直接$http直接可以代替全局的写法

场景二基于某个vue组件使用http（this.$http）

created () {
  this.$http.get('http://apis.baidu.com/tiyu', {
    params: {num: 10}
  }).then((res) => {console.log(res.body)}, (err)=>{
     console.log('出错')
  })
}

在一个组件中使用vue-resource时，将请求写在钩子函数中，大多数情况写在created钩子函数中。

———————美丽的分割线———————
ps：以上都是开始学习vue的时候做的笔记，最近整理到博客上，也发现了其中的一些不足，慢慢完善

2018-12-05

sessionStorage与localStorage的区别

HTML5 的 DOM Storage 机制提供了一种方式让程序员能够把信息存储到本地的计算机上，在需要时获取。这点和 cookie 相似，区别是 DOM Storage 提供了更大容量的存储空间。以前在客户端保存数据使用最多的是 cookie，但 cookie 的大小上限为 4KB，虽然sessionStorage和localStorage也有限制，但是比cookie大的多，并且每次请求一个新页面时 cookie 都会被发送过去，无形中浪费带宽。
在项目中不同组件需要相同的一些数据，通过路由传来传去，还得在不同路由中需要定义参数进行接收，无疑在不同组件中定义了很多变量，若是放在全局，并不能清除掉，无疑浪费资源。可以通过Storage机制存在客户端，不同路由就直接取即可，那么需要考虑使用两种对象使用哪一种。

（1）区别

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的。通过以上的不同点，在本项目中使用session来进行存取，只在一次会话中进行存取。

（2）存取方法

1 2	sessionStorage.setItem("key", "value"); localStorage.setItem("key", "value"); sessionStorage.getItem("key", "value"); localStorage.getItem("key", "value");

（3）保存在 Storage 对象的数据类型

当使用 DOM Storage 进行本地存储时，任何数据格式在 Storage 对象中都以字符串类型保存，所以如果保存的数据不是字符串，在读取的时候需要自己进行类型的转换。这里我们使用 JSON 将对象序列化之后再存储。
在项目中其中有一个对象需要存入到缓存中：

1	sessionStorage.setItem('textarea', this.textarea)

This.textarea是我在组件中定义的一个对象，但是在 Storage 对象中都以字符串类型保存，所以在Application中查看的时候是这样的：
1.查看Application中存储的字段

所以在存session的时候需要进行转换，如下：

1	sessionStorage.setItem('textarea', JSON.stringify(this.textarea))

现在存的session是一个字符串了，所以在取出session值得时候依然需要转换，转换成原来的数据类型格式，如下：
2.查看Application中存储的字段
JSON.parse() 函数会把 JSON 对象转换为原来的数据类型。

2018-12-05

代码提交、vscode的使用

在项目开发中学会提交代码是不能缺少的技能之一。首先是在本地创建git仓库，如果是单纯自己的文件想要上传到github上的话，在需要上传的文件的文件夹右键菜单中有一个选项”git Bash Here”打开git控制台输入”git init”这时候会发现所在的文件夹多出一个文件，如图：
1.git初始化

看到.git文件就是本地仓库已经创建好了。如果是开发项目的情况下，将项目从远程下载下来可以通过git clone的方式，如：
2.克隆项目

首先进入到项目将要放置的地址，然后执行git clone命令，通过这种方式既可以把远程项目下载到本地也可以在项目中创建本地仓库。两种创建本地仓库的方式。
下面就是进入到项目的开发阶段，为了不破坏master主干上的代码，需要先创建自己的开发分支。
第一步：创建分支dev分支 git branch dev
第二步：切换到dev分支 git checkout dev
前两步操作可以一步操作进行： git checkout -b dev 加上-b参数表示创建并切换分支
第三步：提交文件，提交文件分为两步，
①git add 文件名或者是 git add * （提交文件夹中的所有文件） //将文件提交到暂存区，并没有提交到远程
②git commit -m “message” //将文件提交到本地仓库 -m参数用于添加提交文件的备注信息
③将文件提交到远程 git push
以上这么麻烦的命令行，让我能够知道提交代码发生的过程，目前在开发项目中用vscode编辑器，提交代码再也不用担心，如果要提交代码时，首先选择自己的开发分支，界面左下角的位置在界面顶部弹出框中选择分支或创建分支，界面左下角显示当前分支，如下图：
3.vscode切换分支

第二步，提交文件时点击界面左侧菜单栏分支按钮，显示有几个文件有更改，右侧显示更改的文件名称，
4.vscode提交

第三步，提交文件时在上图的文件列表上部添加提交备注，同事按住ctrl+enter键提交，通过git status命令查看提交状态，
5.查看提交状态
提示提交信息成功。

2018-11-23

调试工具的使用

开发怎么能离开调试工具，感谢浏览器的开发者调试工具，不墨迹来了。

1.F12调试

1、打开开发者调试工具
通过以下方式打开开发者调试工具：
① 在网页上右键选择“检查”
② 快捷键 F12
③ Ctrl+shift+i
④ 找到浏览器右上角的三个点，找到更多工具，然后选择开发者工具
开发者调试工具打开后的，如图：
chrome1

2.导航条部分功能使用

①快速找到页面中某个节点，利用导航条最左端的小图标点击后变成蓝色，在界面的左侧就是“页面显示部分”鼠标停留的部分会变成高亮，点击时“调试工具显示部分”会显示被点击的节点的dom元素会高亮显示以及显示样式，如图:
chrome2

过开发者调试工具可以模拟移动端的界面，找到导航条中选中元素图标右边的矩形叠加小图标，点击，页面显示部分显示移动端的样式，如图：
chrome3
③ 在①的图中看到开发者调试工具的页面看到是在右侧，在导航条部门找到三个点（不是浏览器的点），在弹出框部门选择模式，如图：
chrome4
当前是在右侧，第一个是调试工具界面与页面显示部分分离出来。

3.Elements的使用

在导航条中选择Elements，在标号为1的区域显示dom树结构，2区域显示样式，3为盒子模型，最中间显示的是左侧页面显示部分高亮元素的宽和高，绿色部分是pading的值，其次黄色是border和橙色是margin。
chrome5

在标号为2的区域中elements.style添加样式，可以在线调试样式，在该处添加样式会直接添加到行内样式中，所以优先级最高，如果在文件中已经定义了样式，不生效，在此处添加生效，那就要需要查看在页面中添加样式的优先级问题了。
chrome6

还可以通过Elements下载图片，找到图片的对应的节点，鼠标悬在图片节点上，会显示该图片，如下图，在图片的地址位置右键，在弹出的菜单选项中选择open in new tabs这样该图片显示new一个新的窗口页，即可下载
chrome7

4.console的使用

通常情况下我们想要打印一些信息就在页面中写console.log(data)等显示在此处，除此之外，也可以查看一些基础的知识或者演示一些代码，如：
chrome8
返回了window下的所有属性，或者知识演示一些代码，如图:
chrome9
熟知的是console.log()打印一般的日志，还有console.error()显示带有红色小图标的红色错误信息，console.warn()显示带有黄色小图标的警告信息。如图：
chrome1010

5.Sources的使用

可以在这个面板显示当前项目的结构，选择一个项目可以进行调试js代码，如图:
chrome10
左侧显示项目的结构，我们通过该面板本地的js代码，也可以调试远程的js代码，可以通过选择文件的名字打开文件或者用面板中间部分提示的快捷键打开文件，打开一个文件，在面板的中间部分，显示全部文件信息，可以通过点击在js部分每行前边的序号添加断点，如图：
chrome11
刷新页面后：
chrome12
在执行第一个断点的方法时，页面显示部分如上图左侧显示，右侧画框的部分显示全部的断点，在一个断点的时候，可以通过查看变量的值，如;
chrome13
将鼠标悬在左侧红色的框内，则会显示该变量的值，也可以通过在右侧的watch里添加需要监听的变量，点击加号，输入需要观察的变量名称后回车，即添加成功，若该变量实时变化watch中的变量也会实时变化，也可以添加多个需要监听的变量。同样也可以通过在source面板中添加自己的debugger代码。
在面板的右上角
chrome14
有这样的几个小图标，分别是:
第1个：放行，停止该行代码的调试
第2个：不跳入函数中去，继续执行下一行代码（F10）
第3个：跳入函数中去（F11）
第4个：从执行的函数中跳出
第5个：禁用所有的断点，不做任何调试
第6个：程序运行时遇到异常时是否中断的开关

6.Network的使用

在进行向接口请求数据或者提交数据的时候，需要使用到network面板，如：

chrome15
目前network监听全部的请求，在面板左侧选择要查看的接口，点击后，可以看到面板右侧Headers的内容，包括一些请求地址、http请求状态，请求头以及传递的参数，提交数据的时候避免是出错要认真核对，切换选项卡到preview，查看接口返回的数据，如图：
chrome16
在这里师父交了一个大招，就是在监听media类型的时候，点击qq或者网易云音乐的音乐文件时候，在请求列表会显示请求的音乐，open in new tabs后既可以下载音乐了，再也不用买会员啦。

##7.Application的使用
在Application可以查看存在浏览器中的全局信息，如图：
chrome18
用到最多的就是左侧红色圈住的部分，当前查看的是存在localstorage中的信息，如上图的右侧，无论是哪一种存储机制，都是键值对的形式。

8.附加插件的使用

项目开发使用vue框架，在chrome扩展插件中安装vue插件何乐而不为呢。首先利用蓝灯翻墙，然后在chrome的应用中搜索vue，如图：

chrome20
并选择添加，添加成功后，刷新浏览器，会在导航条部分出现Vue
切换了，切换到vue面板中，如图：
chrome21
在面板左侧显示，当前页面中所有的组件，便是App.vue根组件，所有的组件都渲染在根组件的中，展开的箭头，会看到app下所有组件的名称，选择一个组件查看，可以查看到右侧的该组件的信息。也可以切换查看该组件的企业信息，比如Vuex状态管理器中的数据或者查看组件都执行了哪些事件，使vue的开发更加方便。

2018-11-22

路由传参的几种方式

组件跳转的时候，下一个组件有的时候会需要前一个页面的一些参数。比如说相同的组件但是要根据不同的角色请求不同的接口等等。有几种路由传递参数的方式：

（1）通过url路径来传递参数(不太知道如何定义类型)

那么通过url路径在浏览器中显示为：http://localhost:8079/#/detail/333
detail是我要跳转的页面/后面333就是我要传递的参数，若是使用这种方式来传递参数的时候，我们需要在路由的文件中来修改一下

1 2	// detail后面添加/:id, id代表传过来的参数名为id { path: '/detail/:id', name: 'detail', meta: {title: '办事详情'}, component: detail }

在跳转路由的时候有两种方式：

1
2
3

this.$router.push({path: '/detail/333'});    // 在js的方法中

<router-link :to="{path: '/detail/333'}"></router-link>  // 在组件中使用<router-link>标签

那么我们在detail组件中通过以下的方式来获取参数id的值

1	this.$route.params.id

*注意：路由跳转的时候是router，获取路由参数的时候是route

（2）通过query来传递参数

通过query传递参数的时候，在浏览器显示则为：http://localhost:8079/#/detail?id=333
会拼接在url的问号后面，这种方式不用修改路由的文件，写成：

1	{ path: '/detail', name: 'detail', meta: {title: '办事详情'}, component: detail },

那么在跳转路由的时候写成：

1	this.$router.push({path: '/detail', query: {id: 333}});

在获取参数id的时候，写法如下：

1	this.$route.query.id

（2）通过pararms来传递参数

通过pararms传递参数的时候，在浏览器显示则为：http://localhost:8079/#/detail
也就是说这种传递参数的方式不会在url显示出来。并且这种方式不用修改路由的文件，写法参见方法二

那么在跳转路由的时候写成：

this.$router.push({name: 'detail', params: {id: 333}});
// 注意哦，看着跟方法二很像，差别有两个：
push对象中path改成name，对应跳转组件的name；
第二个参数对象名称为params

在获取参数id的时候，写法如下：

1	this.$route.params.id

———————美丽的分割线———————
ps：以上都是开始学习vue的时候做的笔记，最近整理到博客上，也发现了其中的一些不足，慢慢完善

2018-11-20

欢迎来踩踩

开始整理一些之前学习和在项目中的笔记，这样就不用在多个客户端下载OneNote然后同步笔记、同步笔记、同步笔记！最开始都是刚刚参加的时候做的一些笔记以及项目总结，比较稚嫩，后边还是会注意质量的输出。来啦~~~

1.返回新数组

2.替换原数组

3.改变键值(key)

两种场景使用

场景一 基于全局对象使用http（vue.http）

场景二 基于某个vue组件使用http（this.$http）

（1）区别

（2）存取方法

（3）保存在 Storage 对象的数据类型

1.F12调试

2.导航条部分功能使用

3.Elements的使用

4.console的使用

5.Sources的使用

6.Network的使用

8.附加插件的使用

（1）通过url路径来传递参数(不太知道如何定义类型)

（2）通过query来传递参数

（2）通过pararms来传递参数

场景一基于全局对象使用http（vue.http）

场景二基于某个vue组件使用http（this.$http）