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