Vue.js的路由、vue-resource、es6语法、vuex

5、路由介绍

（1）基础介绍

  · vue-route用来构建SPA

  · html标签跳转（类似于a）:<route-link to="路由"></route-link>或js中this.$route.push({path:''})

三种绑定

  1、to="/apple"

  2、:to="{path: '/apple'}"

  3、:to="{name: 'Apple'}"

在route-link中加tag="li"可以指定为li标签（默认为a标签）

· 渲染<route-view></route-view>

  · 安装

cnpm install vue-router --save           --save保存在package.json中

  · 使用

import Router from 'vue-router'

Vue.use(Router)

（2）动态路由

  · /user/:username       :username可以随意变化

测试：

在src/route/index.js下

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'   // @代表别名是src的映射
import GoodsList from './../views/GoodsList'   // 引入的组件取名和路径，.vue后缀可以省略

Vue.use(Router)

export default new Router({
  routes: [
    {
    	path: '/goods/:goodsId',    // 路由
    	name: 'GoodsList',   // 路由名
        component: GoodsList   // 引入组件名
    }
  ]
})

在src/views/GoodsList.vue中

<template>
  <div>
    这是商品列表页
    <span>{{ $route.params.goodsId}}</span>     <!--获取路由的参数后面是参数名-->
  </div>
  
</template>

效果：

对于上面路由中的#号，是因为采用了hash模式的命名，可改为history模式，便不会有#号

export default new Router({

mode: 'history',
routes: [
    {
    	path: '/goods/:goodsId',
    	name: 'GoodsList',
        component: GoodsList
    }
  ]
})

（3）嵌套路由

在index.js里

{
    	path: '/goods',
    	name: 'GoodsList',
        component: GoodsList,
        children: [
        	{
        		path: 'title',   // 前不能加/否则就是根 == /goods/title
        		name: 'title',
        		component: Title
        	},
        	{
        		path: 'img',
        		name: 'img',
        		component: Image
        	}
        ]
    }

在GoodsLIst.vue里

<template>
  <div>
    这是商品列表页
    <span>{{ $route.params.goodsId}}</span>
    <router-link to="/goods/title">显示标题</router-link>
    <router-link to="/goods/img">显示图片</router-link>
    <div>
      <router-view></router-view>
    </div>
  </div>
  
</template>

（4）编程式路由，js中定义

在GoodsList.vue中

<template>
  <div>
    这是商品列表页
    <span>{{ $route.params.goodsId}}</span>
    <button @click="cart">购物车页面</button>
  </div>
  
</template>

定义点击方法：

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    cart() {
      this.$router.push("/cart");
    }
  }
  
}
</script>

传参时：this.$router.push({path: 'cart?goodsId=122'});

获取参数：$route.query.goodsId

注：使用/goodsList/:goodsId时，获取参数：$route.param.goodsId

（5）命名视图

<route-view name="viewA"></route-view>               不同的route-view显示不同的组件
<route-view name="viewB"></route-view>

routes: [
    {
        path: '/apple',
        component: {
            viewA: apple,
            viewB: applePagr
        }
    }
]

（6）重定向

route: [
    {
        path: '/',
        redirect: '/apple'                  首页重定向到apple页面
    }
]

6、vue-resource基础介绍

（1）使用安装

  · <script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>

lenovo@DESKTOP-NL309GS MINGW64 /e/workspace/xampp/htdocs/demo/mall
$ cnpm install vue-resource
Recently updated (since 2018-02-16): 2 packages (detail see file E:\workspace\xampp\htdocs\demo\mall\node_modules\.recently_updates.txt)

import VueResource from 'vue-resource'

Vue.use(VueResource)

（2）7种api

get、head、delete、jsonp、post、put、patch

（3）使用

created: function() {
    this.$http.get('getList')         // 请求
    .then(function(data) {            // 请求成功  == .then((res) => {this.newList = res.data}, (err) => {})
      console.log(data)
    }, function(err) {                // 请求失败
      console.log(err)
    })
  },

this.$http.post('getList', {userId: 111})

this.$http.get()

7、es6语法

（1）使用import引入，使用export default导出

import Hello from './components/Hello'

export default {
    components: {
        Hello                                    相同时：== Hello: Hello
    }
}

（2）let和var的区别

let：当前作用域，外层取不到

var：在外也可以访问

const：常量

（3）函数缩写

data () {} == data: function() {}

8、vuex:状态管理插件，是一个公共的数据仓库，多个组件状态一致，如：登录百度时，百度贴吧状态一致

（1）安装

$ cnpm install vuex --save

（2）使用在main.js中

import Vuex from 'vuex'

Vue.use(Vuex)

（3）实例

main.js中

const store = new Vuex.Store({                   定义一个store
	state: {
		totalPrice: 0                    数据仓库
	},
	mutations: {                             自定义的动作
		increment (state, price) {       1、就是state，2、price后面调用这个动作时传递的参数
			state.totalPrice += price
		},
		decrement (state, price) {
			state.totalPrice -= price
		}
	}
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,                                        全局注册
  components: { App },
  template: '<App/>'
})

app.vue中

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>{{ totalPrice }}</p>
    <apple></apple>
    <banana></banana>
  </div>
</template>

<script>
import Apple from './components/Apple'
import Banana from './components/Banana'

export default {
  components: {Apple, Banana},
  computed: {
    totalPrice () {
      return this.$store.state.totalPrice      通过$store.state.totalPrice获取数据

    }
  }
}
</script>

apple.vue

<template>
  <div id="app">
    <p>i am apple</p>
    <button @click="addOne">add one</button>
    <button @click="minuxOne">minus one</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 5
    }
  },
  methods: {
    addOne () {
      this.$store.commit('increment', this.price)        通过$store.commit传递给mutations中的动作，（动作名，参数）
    },
    minuxOne () {
      this.$store.commit('decrement', this.price)
    }
  }
}
</script>

（4）actions的使用

const store = new Vuex.Store({
	state: {
		totalPrice: 0
	},
	mutations: {
		increment (state, price) {
			state.totalPrice += price
		},
		decrement (state, price) {
			state.totalPrice -= price
		}
	},
	actions: {
		increase (context, price) {
			context.commit('increment', price)           通过调用mutations中的动作，间接改变值
		}
	}
})

methods: {
    addOne () {
      this.$store.dispatch('increase', this.price)                   使用dispatch绑定
    },
    minuxOne () {
      this.$store.commit('decrement', this.price)
    }
  }

（5）使用getters取数据

state: {
		totalPrice: 0
	},
	getters: {
		getTotal (state) {
			return state.totalPrice
		}
	},

computed: {
    totalPrice () {
      return this.$store.getters.getTotal          通过getters取出数据
    }
  }