内容概要
- 1 Vuex 的使用
- 1.1vuex的执行流程图
- 2.Vue-router的使用
- 2.1基本的使用
- 2.2路由的跳转
- 2.3路由的跳转携带参数
- 2.4路由的嵌套
- 2.5路由的守卫
内容详细
1 Vuex 的使用
# vue的插件,增强了vue的功能,
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
# Vuex的使用流程
-state:存数据的地址
-actions:服务员,中转站
-mutations:厨师,真正改state数据的地方
-使用步骤:
1 在state中定义变量
2 在组件中通过this.$store.dispatch('actions中定义的函数'),触发actions中得函数执行
3 在actions中得函数中,调用 context.commit('mutations中定义的函数')
4 在mutations中定义的函数实现真正的修改state中得数据
5 页面中只要使用$store.state.变量,变量变化,页面就变化 实现了组件间通信
6 注意:
-在组件中可以直接调用commit触发【mutations中定义的函数】
-在组件中可以直接修改state中定义变量
1.1 vuex的执行流程图
2 Vue-router的使用
# 官方提供的用来实现SPA 的vue 插件:有了它以后,我们可以写很多页面组件,通过地址栏不同的路径显示不同的页面组件
# https://router.vuejs.org/zh/index.html
2.1 基本使用
# 使用步骤
1 新建router/index.js
const routes = [配置路由1,配置路由2]
2 main.js中使用:之前已经写好了
import router from './router'
new Vue({
...
router,
...
}).$mount('#app')
3 只需要写页面组件,配置路由即可
4 在App.vue中加入
<router-view>
</router-view>
5 在浏览器访问const routes中配置的路径,就能看到对应的页面组件了
2.2 路由的跳转
# 使用步骤:
- 在html中使用
<router-link :to="path">去登录</router-link>
-在js中使用
this.$router.push('goods')
2.3 路由跳转携带参数
# 两种情况
-带在请求地址中以 ?name=lqz&age=19
-在地址中类似于django的分组 /goods/1/
# 情况1:请求地址中
-<router-link to="/login/?name=lqz&age=19">去登录</router-link>
-组件中接受:this.$route.query.取
# 情况2:地址中
<router-link to="/login/lyf">去登录</router-link>
-组件中接受:this.$route.params.取
2.4 路由嵌套
# 使用步骤:
1 router/index.js 相应的路由中
{
path: '/goods',
name: 'goods',
component: Goods,
children: [
{
path: 'list',
component: GoodList
},
{
path: 'detail',
component: GoodDetail
}
]
},
2 必须要在Goods组件中,写<router-view></router-view>
3 使用router-link标签跳转
4 只会变更Goods下router-view包裹的位置
2.5 路由守卫
# 对路由进行权限控制
# 前置路由守卫
router.beforeEach((to, from, next) => {
console.log('前置路由守卫', to, from)
if (to.name == 'shoppingcart') {
let name = localStorage.getItem('name')
if (name) {
next()
} else {
alert('不好意思没有权限')
}
} else {
next()
}
})
# 后置路由守卫
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from)
document.title = to.name
})
原文地址:http://www.cnblogs.com/55wym/p/16849244.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性