本文记录vue 使用的小tip

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

代码如下

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

路由重定向

重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

重定向的目标也可以是一个命名的路由:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

甚至是一个方法,动态返回重定向目标:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

vue 项目报错 nstead of an instance of Error) Error compiling template:

app.vue

<template>
   <h4>Circle</h4>
   <br><br>
   <ButtonGroup shape="circle">
     <Button type="primary" icon="ios-skipbackward">上一首</Button>
     <Button type="primary" icon="ios-skipforward">下一首</Button>
   </ButtonGroup>
</template>

<script>
    import Message from './Components/Message.vue';

    export default {
        name: 'app',

        components: {
            Message,
        },

        data () {
            return {

            }
        }
    }
</script>

执行npm start 报错 nstead of an instance of Error) Error compiling template:

Stack Overflow查了一下,原因如下:

这个错误非常明显。每个组件中应该只有一个根元素。所以只需将所有内容打包在一个div中
<template>
    <div>
         <h4>Circle</h4>
   <br><br>
   <ButtonGroup shape="circle">
     <Button type="primary" icon="ios-skipbackward">上一首</Button>
     <Button type="primary" icon="ios-skipforward">下一首</Button>
   </ButtonGroup>
    </div>
</template>

OK,解决了

Eslint 报错 Strings must use singlequote

return {
      msg: "Welcome to Your Vue.js App", //双引号,报错!
}

错误原因: 字符串必须用单引号

vue 2.0 设置全局变量

比如资源服务器的host,后台api的host,微信第三方的host。这些host不能挨个去代码里面写吧。
其实,我就是想知道vue如何设置全局变量。总感觉放到window,localstorage,sessionstorage不太正规。

解决办法

assets文件夹新建文件utils.js:

export default{
  install(Vue,options)
  {
    // 保存全局变量接口网址用于测试
    Vue.prototype.apiUrl = 'http://xxx/xx.php'
  }
}

main.js文件里引入utils.js

// 引入存储全局变量的插件util.js
import util from './assets/util'

Vue.use(util)

vue获取自定义属性的值

<p style="height: 80px;text-align: center;line-height: 80px;" @click="fetchMusic(item.id)" :song_id="item.id">{{item.name}}</p>

这样子才可以取到自定义的song_id

fetchMusic (id) {
  console.log(id)
  this.$http.post(this.api+'/music/url?id='+id)
    .then((res) => {
      this.$Loading.finish();
      console.log(res.body.playlist.tracks)
      this.resArr = res.body.playlist.tracks
    })
    .catch((err) =>  this.$Loading.error())
}

扫描二维码,在手机上阅读!