发布于

vue传值

this.$router.push({    name: 'Login', params: {to: 'InnovateProject'}

路由跳转直接在@click后面写的话不要加this 直接写$router.push
})

路由跳转，传来的数据清空，解决方法在index.js的path里面传参数
如

path: '/register/:inviteeCode/:account',

它的/:inviteeCode/:account 是2个传的变量

vue methods中一个函数调用另外一个函数

this.$options.methods.函数名字();
（这样的话要注意，this的指向已经指向了这个实例而不是指向全局，所以可能会报错说bind没有函数绑定）
要this指向全局实例，要在后面加.bind（this） 如：

this.$options.methods.函数名.bind(this)()

发布于

vue技术杂记

以后会慢慢更新

  1. 如果你的语句有一条没有执行，可以在它前面加debugger来调试
  2. this和that区别
在Vue中this始终指向Vue，但axios中this为undefined
若需要赋值给变量用以渲染数据，可以通过=>函数，这时this为Vue

如：.get().then((response) => {
    })
这样就可以用this
或者可以直接通过： 

let that = this 

将this保存在that中，再在函数中使用that均可 

let that = this 要放在你请求接口上面
axios里在路径后面必须加 {params:params}
 如：axios.get("路径",{params:params})

3.有语法规定时，VUE提示必须要有:key，只需将:key=’management2.id’

management2是你设置的，如management2 in team

4. window.location.search 为空 ,即获取当前浏览器路径为空

因为查询字符串search只能在取到“？”后面和“#”之前的内容，如果“#”之前没有“？”search取值为空 。

这时可以用

window.location或者document.location。这两者是互相等价的，可以交换使用

window.location的属性表

属性含义值
protocol:协议“http:”
hostname:服务器的名字“b.a.com”
port:端口“88”
pathname:URL中主机名后的部分“/index.php”
search:“?”后的部分，又称为查询字符串“?name=kang&when=2016”
hash:返回”#”之后的内容“#first”
host:等于hostname + port“b.a.com:88”
href:当前页面的完整URL“http://www.a.com:88/index.php?name=kang&when=2016#first”

5.vue函数里面需要拼接data里的变量时

用this[这里放你已经拼接好的局部变量]，如：

for (let i = 1; i<=9; i++){
  let ss =String('m' + i)
  this[ss] = false
}

发布于

Vue配置路由和嵌套路由的爬坑

首先你要在src目录下新建一个文件夹来放你接下来要建的Vue文件如图：

​

​​ 建立好文件夹和文件夹内的vue文件后，他会自动生成内置的一些代码（这都不重要）

接下来就是要配置路由router,也就是配置index.js文件

配置index.js文件

首先你要引入你的文件

​
import Privacy from  ‘@/pages/account/Privacy’

​

前面是你的文件名，后面是你的路径， @ 相当于 ..  

这些弄完后再开始配置routes ​

​​ （不要看那个https什么的，那是传图片出现的错误）

path是路径，只要一个“/”默认是主页路径，component是你的组建名，一般和文件名同名，name和你新建的Vue页面定义的name一致，一般都和文件名一致建立完后运行即可。

想进入你刚刚定义的页面，如果没有定义跳转路由的话直接去页面改变路径，如我的：

即可看到你定义的页面。

注意：用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长。所以我们一般用require这种方式引入。它会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js。

meta里面写一些页面描述

如：

​
{
path: ‘/Privacy’,
// name: ‘Privacy’,
component: resolve => require([‘@/pages/account/Privacy’],resolve),
meta:{
title:’关于我们’
}

​

这种写法，和上图的写法一样的，写完后可以将 import Privacy from  ‘@/pages/account/Privacy’ 这段代码删除，比较简便。

如果你先定义路由后，在这个路由里面继续定义子路由，来实现一个点击标签页面内某些部分内容发生变化。则需定义嵌套的子路由

实现在你新建的页面（我这里是Privacy页面）写一个div来放<router-view/>，这就是你子路由要显示的地方。如：

​      
​    <div>       <router-view/>     </div>

注意：一个页面的template中只能有一个div,即不能写成这样 

 
​<template>   
     <div>
       </div>
     <div>
       </div>
 </template>

​

这会报错，只能这么写 

 
​<template>
   <div>
    <div>
          </div>
     <div>
       <router-view/>
     </div>
   </div>
 </template>

弄完后建立你的嵌套子路由页面

​

黄色是我为嵌套子路由页面写的一个文件夹，把它们都放进去，红色括起来的4个是我的子路由页面。

接下来开始配置路由

还是在router目录下的index.js文件中

​
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld
},
{
path: ‘/Privacy’,
// name: ‘Privacy’,
component: resolve => require([‘@/pages/account/Privacy’],resolve),
meta:{
title:’关于我们’
},
children:[
{
path: ‘Introduction’,
name: ‘Introduction’,
component: resolve => require([‘@/pages/account/dialog/Introduction’],resolve),
meta:{
title:’公司简介’

}
}
]
}

​

在meta后面写子路由children,一定要注意children要在它父级路由配置的花括号里面！

子路由的path可以不加“/”号直接写成path: ‘Introduction’。当然也可以加。

弄完后别忘记在父级页面，我这里是Privacy页面写个跳转标签。（一般点击跳转会有判断什么的，所以用个函数包起来）

 
​<li :class="{'Privacy_box_active': m4}" @click="goTo">

​
methods:{
goTo：function() {
this.$router.push({name: ‘Introduction’})
}
}

​

这样就写好了，下面贴一下我的完整代码 

​
  <!--父级页面Privacy.vue-->
<template>
  <div class="Privacy_box">
    <span class="left_span">关于我们</span>
    <ul class="pb10">
      <li :class="{'Privacy_box_active': m1}" @click="goTo('m1')">
        <span>公司简介</span>
      </li>
      <li :class="{'Privacy_box_active': m2}" @click="goTo('m2')">
        <span>隐私政策</span>
      </li>
      <li :class="{'Privacy_box_active': m3}" @click="goTo('m3')">
        <span>注册协议</span>
      </li>
      <li :class="{'Privacy_box_active': m4}" @click="goTo('m4')">
        <span>联系我们</span>
      </li>
    </ul>
    <div class="bh-account_router">
      <router-view/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Privacy',
    data () {
      return {
        m1:true,
        m2: false,
        m3: false,
        m4: false
      }
    },
    created() {
      alert("开始第一次调用")
      this.refresh()
    },
    mounted(){
      alert("开始第二次调用")
      this.refresh()
    },
    methods:{
      goTo (menu) {
        this.m1 = false
        this.m2 = false
        this.m3 = false
        this.m4 = false
        this[menu] = true
        switch (menu) {
          case 'm1':
            this.$router.push({name: 'Introduction'})
            break
          case 'm2':
             this.$router.push({name:'trueprivacy'})
            break
          case 'm3':
             this.$router.push({name:'registered'})
            break
          case 'm4':
             this.$router.push({name:'contact'})
            break
          default:
              this.$router.push({name:'App'})
        }
      },
      refresh(){
        const meta = (this.$route.path).split("/")
        this.m1 = false
        this.m2 = false
        this.m3 = false
        this.m4 = false
        switch (meta[2]) {
          case 'Introduction':
            this.m1=true
            break
          case 'trueprivacy':
            this.m2=true
            break
          case 'registered':
            this.m3=true
            break
          case 'contact':
            this.m4=true
            break
          default:
            break
        }
      }
  }
  }
</script>

<style scoped>
  .Privacy_box{
    width: 1360px;
    min-height: 555px;
    margin: 33px auto 90px auto;
    background-color: #FFF;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
  }
  .left_span{
    font-family:PingFangSC-Regular;
    font-size:14px;
    color:#999999;
    letter-spacing:0.39px;
    text-align:left;
    display: block;
    position: absolute;
    left: 75px;
    top: 15px;
  }
  /*菜单*/
  .Privacy_box  ul {
    display: inline-block;
    list-style:none;
    width: 230px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    padding-top: 36px;
    padding-left: 43px;
  }
  /*鼠标滑过*/
  .Privacy_box li {
    min-height: 45px;
    max-height: 70px;
    line-height: 45px;
    text-align: left;
    width: 190px;
    cursor: pointer;
    border-left: 2px solid transparent;
  }
  .Privacy_box li span{
    font-family:PingFangSC-Regular;
    font-size:16px;
    color:#666666;
    letter-spacing:0.45px;
    margin-left: 48px;
  }
  .Privacy_box li:hover {
    background-color: #f0f4ff;
  }
  /*被选中*/
  .Privacy_box .Privacy_box_active {
    background-color: #f0f4ff;
    border-left: 2px solid #0BB2FE;
  }



  /*路由*/
  .bh-account_router {
    display: inline-block;
    width: 969px;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 1px solid #e6e6e6;
  }
</style>

​

路由index.js：

​
import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’

Vue.use(Router)

export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld
},
{
path: ‘/Privacy’,
// name: ‘Privacy’,
component: resolve => require([‘@/pages/account/Privacy’],resolve),
meta:{
title:’关于我们’
},
children:[
{
path: ‘Introduction’,
name: ‘Introduction’,
component: resolve => require([‘@/pages/account/dialog/Introduction’],resolve),
meta:{
title:’公司简介’,
group: ‘Dialog’
}
},
{
path: ‘trueprivacy’,
name: ‘trueprivacy’,
component: resolve => require([‘@/pages/account/dialog/trueprivacy’],resolve),
meta:{
title:’隐私政策’,
group: ‘Dialog’
}
},
{
path: ‘registered’,
name: ‘registered’,
component: resolve => require([‘@/pages/account/dialog/registered’],resolve),
meta:{
title:’注册协议’,
group: ‘Dialog’
}
},
{
path: ‘contact’,
name: ‘contact’,
component: resolve => require([‘@/pages/account/dialog/contact’],resolve),
meta:{
title:’联系我们’,
group: ‘Dialog’
}
}
]
}
]
})

​

完整目录:

​​ 嵌套子页面什么样我就不写了，你建立了子页面在他们的template下加个div就能运行。

发布于

vue踩坑日记

如果你的语句有一条没有执行，可以在它前面加debugger

this和that区别

在Vue中this始终指向Vue，但axios中this为undefined

若需要赋值给变量用以渲染数据，可以通过=>函数，这时this为Vue
如：.get().then((response) => {

    })

这样就可以用this

或者可以直接通过：
let that = this
将this保存在that中，再在函数中使用that均可
let that = this 要放在你请求接口上面

axios里在路径后面必须加 {params:params}
如：axios.get(“路径”,{params:params})

有语法规定时，提示必须要有:key，只需将:key=’management2.id’

management2是你设置的，如management2 in team

vue传值
this.$router.push({
name: ‘Login’, params: {to: ‘InnovateProject’}

路由跳转直接在@click后面写的话不要加this 直接写$router.push
})

路由跳转，传来的数据清空，解决方法在index.js的path里面传参数
如
path: ‘/register/:inviteeCode/:account’,

它的/:inviteeCode/:account 是2个传的变量

vue methods中一个函数调用另外一个函数

this.$options.methods.函数名字();
（这样的话要注意，this的指向已经指向了这个实例而不是指向全局，所以可能会报错说bind没有函数绑定）
要this指向全局实例，要在后面加.bind（this） 如：this.$options.methods.函数名.bind(this)()