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

5、路由介绍

（1）基础介绍

  · vue-route用来构建SPA

  · html标签跳转（类似于a）:或js中this.$route.push({path:''})

三种绑定

  1、to="/apple"

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

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

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

· 渲染

  · 安装

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中

效果：

对于上面路由中的#号，是因为采用了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里

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

在GoodsList.vue中

定义点击方法：

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

获取参数：$route.query.goodsId

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

（5）命名视图

               不同的route-view显示不同的组件


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

（6）重定向

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

6、vue-resource基础介绍

（1）使用安装

  ·

 

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.vue中

apple.vue

（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取出数据
    }
  }