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