Vue vuex vue-router

文章目录

Vue vuex vue-router
- 1、Vuex的使用
- 2、Vue-router的使用
- - 2.1、基本使用
  - 2.3、路由的跳转
  - 2.3、路由跳转携带参数
  - 2.4、路由嵌套
  - 2.5 路由守卫

1、Vuex的使用

Vue的插件，增强了vue的功能
在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

Vuex 的使用教程

state：存数据的地址
actions：服务员，中转站
mutations：厨师，真正改state数据的地方

使用步骤

在state中定义变量
在组件中通过this.$store.dispatch('actions中定义的函数')，触发actions中得函数
在actions中得函数中，调用 context.commit('mutations中定义的函数')
在mutations中定义的函数实现真正的修改state中得数据
页面中只要使用$store.state,变量，变量变化，页面就变化，实现了组件间通信
注意：

在组件中可以直接调用commit触发【mutations中定义得函数】

在组件中可以直接修改state中定义变量

2、Vue-router的使用

官方提供的用来实现SPA 的vue 插件：有了它以后，我们可以写很多页面组件，通过地址栏不同的路劲显示不同的页面组件

https://router.vuejs.org/zh/index.html

2.1、基本使用

使用步骤
新建router/index.js

const routes = [配置路由1，胚子hi路由2]
main.js中使用:之前已经写好了import router form './router'new Vue({"""router,"""}),$mount('#app')3 只需要写页面组件,配置路由即可
4 在App.vue 中 加入
<router-view></router-view>
5 在浏览器访问const routes中配置的路径，就能看到对应的页面组件了

2.3、路由的跳转

使用步骤：
在html中使用

<router-link to="login">去登录</router-link>#<router-link :to="path">去登录</router-link>
# path作为变量 携带 跳转路由的 名字

在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.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
})

Vue vuex vue-router相关推荐

详解 Vue Vuex 实践
2019独角兽企业重金招聘Python工程师标准>>> 随着应用复杂度的增加,我们需要考虑如何进行应用的状态管理,将业务逻辑与界面交互相剥离,详细讨论参考笔者的2016-我的前端之路 ...
vue vuex vue-router后台项目——权限路由（超详细简单版）
项目地址:vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有最高权限A 他可以看到 red , yellow 和 bl ...
vue vuex 挂载_vue.js,javascript_Vuex的初始化失败，一直显示没有挂载到根组件上，奇怪了！，vue.js,javascript - phpStudy...
Vuex的初始化失败,一直显示没有挂载到根组件上,奇怪了! 代码如下 import 'babel-polyfill' import Vue from 'vue' import VueRouter fr ...
vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
使用 Vuex + Vue.js 构建单页应用
原文地址:https://coligo.io/learn-vuex-by-building-notes-app/ 前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 ...
vue2.0聊天室vue-chatRoom|仿微信界面vue+vuex+vueRouter
Vue2.0+Vuex+VueRouter仿微信界面聊天室|仿微信聊天窗口|仿微信群聊基于vue2.0+vuex+webpack2.0+es6+wcPop等技术开发的仿微信聊天室vue-weChat ...
使用 Vuex + Vue.js 构建单页应用 1
鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...
如何使用Vuex+Vue.js构建单页应用
原文地址:https://coligo.io/learn-vuex-by-building-notes-app/ 前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 ...
Vuex + Vue.js 小小单应用
前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和自定义功能,在这 ...

Vue vuex vue-router

Vue vuex vue-router

文章目录

1、Vuex的使用

2、Vue-router的使用

2.1、基本使用

2.3、路由的跳转

2.3、路由跳转携带参数

2.4、路由嵌套

2.5 路由守卫

Vue vuex vue-router相关推荐

最新文章

热门文章