Vue高级(二)

image-20221030030358773

img

3.搭建vuex环境

创建文件:src/store/index.js

   //引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)//准备actions对象——响应组件中用户的动作const actions = {}//准备mutations对象——修改state中的数据const mutations = {}//准备state对象——保存具体的数据const state = {}//创建并暴露storeexport default new Vuex.Store({actions,mutations,state})

main.js中创建vm时传入store配置项

   ......//引入storeimport store from './store'......//创建vmnew Vue({el:'#app',render: h => h(App),store})

4.基本使用

初始化数据、配置actions、配置mutations,操作文件store.js

   //引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//引用VuexVue.use(Vuex)const actions = {//响应组件中加的动作jia(context,value){// console.log('actions中的jia被调用了',miniStore,value)context.commit('JIA',value)},}const mutations = {//执行加JIA(state,value){// console.log('mutations中的JIA被调用了',state,value)state.sum += value}}//初始化数据const state = {sum:0}//创建并暴露storeexport default new Vuex.Store({actions,mutations,state,})

组件中读取vuex中的数据:$store.state.sum

组件中修改vuex中的数据:$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

<template><div><hr>{{sum}}<button @click="handleClick">点我</button></div>
</template><script>export default {name: "App",data() {return {v:'xxx',sum:this.$store.state.sum};},methods:{handleClick(){// action中的方法名// this.$store.dispatch('jia',2)// console.log(this.$store.state.sum)//mutations中的方法名this.$store.commit('JIA',4)console.log(this.$store.state.sum)}}
};
</script>

备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch,直接编写commit

九 Router使用

9.1 说明

  1. 官方提供的用来实现SPA 的vue 插件
  2. github: GitHub - vuejs/vue-router: 🚦 The official router for Vue 2
  3. 中文文档: http://router.vuejs.org/zh-cn/
  4. 下载: npm install vue-router --save
//引入VueRouterimport VueRouter from 'vue-router'//引入Luyou 组件import About from '../components/About'import Home from '../components/Home'//创建router实例对象,去管理一组一组的路由规则const router = new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]})//暴露routerexport default router

9.2 相关API

VueRouter(): 用于创建路由器的构建函数

new VueRouter({
// 多个配置项
})

路由配置

routes: [{ // 一般路由path: '/about',component: About},{ // 自动跳转路由path: '/',redirect: '/about'}
]

注册路由

import router from './router'
new Vue({router
})

使用路由组件标签

<router-link>: 用来生成路由链接

<router-link to="/xxx">Go to XXX</router-link>

<router-view>: 用来显示当前路由组件界面

<router-view></router-view>

9.3 路由嵌套

9.4 向路由组件传递数据

//1 路由配置
children: [{path: 'mdetail/:id',component: MessageDetail}
]
// 2 <router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link>// 3 this.$route.params.id

9.5 相关API

this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由

9.6 多级路由

  routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通过children配置子级路由{path:'news', //此处一定不要写:/newscomponent:News},{path:'message',//此处一定不要写:/messagecomponent:Message}]}]// 跳转
<router-link to="/home/news">News</router-link>

9.7 命名路由(可以简化路由的跳转)

    {path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello' //给路由命名path:'welcome',component:Hello,}]}]}
 <!--简化前,需要写完整的路径 --><router-link to="/demo/test/welcome">跳转</router-link><!--简化后,直接通过名字跳转 --><router-link :to="{name:'hello'}">跳转</router-link><!--简化写法配合传递参数 --><router-link :to="{name:'hello',query:{id:666,title:'你好'}}">跳转</router-link>

9.8 router-link的replace属性

作用:控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push
如何开启replace模式:News

9.10 编程式路由导航

//$router的两个APIthis.$router.push({name:'xiangqing',params:{id:xxx,title:xxx}})this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx}})this.$router.forward() //前进this.$router.back() //后退this.$router.go() //可前进也可后退

9.11 路由守卫

  1. 作用:对路由进行权限控制
  2. 分类:全局守卫、独享守卫、组件内守卫

全局守卫

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建并暴露一个路由器
const router =  new VueRouter({routes:[{name:'guanyu',path:'/about',component:About,meta:{title:'关于'}},{name:'zhuye',path:'/home',component:Home,meta:{title:'主页'},children:[{name:'xinwen',path:'news',component:News,meta:{isAuth:true,title:'新闻'}},{name:'xiaoxi',path:'message',component:Message,meta:{isAuth:true,title:'消息'},children:[{name:'xiangqing',path:'detail',component:Detail,meta:{isAuth:true,title:'详情'},//props的第一种写法,值为对象,该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:'hello'}//props的第二种写法,值为布尔值,若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件。// props:true//props的第三种写法,值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:'hello'}}}]}]}]
})//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{console.log('前置路由守卫',to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem('name')==='lqz'){next()}else{alert('名不对,无权限查看!')}}else{next()}
})//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{console.log('后置路由守卫',to,from)document.title = to.meta.title || 'lqz系统'
})export default router

独享守卫

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建并暴露一个路由器
const router =  new VueRouter({routes:[{name:'guanyu',path:'/about',component:About,meta:{title:'关于'}},{name:'zhuye',path:'/home',component:Home,meta:{title:'主页'},children:[{name:'xinwen',path:'news',component:News,meta:{isAuth:true,title:'新闻'},beforeEnter: (to, from, next) => {console.log('独享路由守卫',to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem('name')==='lqz'){next()}else{alert('名不对,无权限查看!')}}else{next()}}},{name:'xiaoxi',path:'message',component:Message,meta:{isAuth:true,title:'消息'},children:[{name:'xiangqing',path:'detail',component:Detail,meta:{isAuth:true,title:'详情'},}]}]}]
})export default router

组件内守卫

  //进入守卫:通过路由规则,进入该组件时被调用beforeRouteEnter (to, from, next) {},//离开守卫:通过路由规则,离开该组件时被调用beforeRouteLeave (to, from, next) {}//通过路由规则,进入该组件时被调用beforeRouteEnter (to, from, next) {console.log('About--beforeRouteEnter',to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){next()}else{alert('学校名不对,无权限查看!')}}else{next()}},//通过路由规则,离开该组件时被调用beforeRouteLeave (to, from, next) {console.log('About--beforeRouteLeave',to,from)next()}

9.12 路由器的两种工作模式

1 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。
2 hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
3 hash模式:
地址中永远带着#号,不美观 。
若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
兼容性较好。
4 history模式:
地址干净,美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题

10 localStorage和sessionStorage

//存:var obj = {"name":"xiaoming","age":"16"}localStorage.setItem("userInfo",JSON.stringify(obj));//取:var user = JSON.parse(localStorage.getItem("userInfo"))
//删除:localStorage.remove("userInfo);
//清空:localStorage.clear();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/624901.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

No module named ‘fcntl‘

问题详情 (base) PS D:\yolov5-master_head> gunicorn -c gunicorn.py wsgi:app Traceback (most recent call last):File "<frozen runpy>", line 198, in _run_module_as_mainFile "<frozen runpy>", line 88, in _run_codeFile "C…

Mantle: A Programmable Metadata Load Balancer for the Ceph File System——论文泛读

SC 2015 Paper 元数据论文阅读汇总 问题 优化Ceph的元数据局部性和负载平衡。 现有方法 提高元数据服务性能的最常见技术是在专用的元数据服务器&#xff08;MDS&#xff09;节点之间平衡负载 [16, 25, 26, 21, 28]。常见的方法是鼓励独立增长并减少通信&#xff0c;使用诸…

中文 DarkVoxel Wiki | CSDN

DarkVoxel Wiki 游戏DarkVoxel的中文百科~ 欢迎来到DarkVoxel Wiki&#xff01; 本wiki于 2024/1/15 迁自 Fandom Wiki&#xff08;因为 Fandom 实在是太烂了&#xff09;以后wiki在这里更新&#xff0c;B站专栏只会发布每个版本的更新内容之类的简单资讯&#xff1b;相关视…

【物以类聚】给el-image预览多张图片增加提示文字,让每张图片有所分类

【物以类聚】给el-image预览多张图片增加提示文字&#xff0c;让每张图片有所分类 一、需求二、el-image三、实施步骤3.1 导包3.2 改造3.3 引入 三、效果 一、需求 点击地图上的一张图片&#xff0c;弹出所有相关的图片资源&#xff0c;图片资源上显示每个图片的所属类型。 二…

《产业结构调整指导目录(2024年本)》发布,模糊测试首次纳入

近日&#xff0c;第6次委务会议通过了新版的《产业结构调整指导目录&#xff08;2024年本&#xff09;》&#xff0c;该目录自2024年2月1日起正式实施。 与之前的版本相比&#xff0c;本次目录在行业设置上进行了全面升级&#xff0c;新增了“网络安全”这一重要行业大类&#…

金蝶云星空单据转换插件-选单

文章目录 金蝶云星空单据转换插件-选单 金蝶云星空单据转换插件-选单 选单使用标识报错 应该使用实体属性

Centos下,使用NFS实现目录共享/网络驱动器

Linux系统下&#xff0c;也可以像windows一样通过目录共享实现网络驱动器模式访问。具体操作步骤如下&#xff1a; 一、服务端&#xff1a; 1、确认下服务端系统是否已安装 NFS rpm -qa nfs-utils rpcbind 如果没有&#xff0c;安装 NFS 服务 yum install -y nfs-utils rpcbi…

SpringMVC controller方法返回值见解3

3.controller方法返回值 3.1.返回ModelAndView 说明&#xff1a;controller方法中定义ModelAndView对象并返回&#xff0c;对象中可添加model数据、指定view 3.2.返回字符串 3.2.1.逻辑视图名 说明&#xff1a;controller方法返回字符串可以指定逻辑视图名&#xff0c;通过…

第九讲_css渐变

css渐变 1. 渐变的作用2. 渐变的类型2.1 线性渐变2.2 环形渐变 1. 渐变的作用 CSS3 渐变&#xff08;Gradients&#xff09;可以让两个或多个指定的颜色之间的显示平稳的过渡。 2. 渐变的类型 渐变&#xff08;Gradients&#xff09;分为线性渐变&#xff08;Linear Gradien…

杨中科 EFCORE 第五部分 同样的Linq 被不同数据据翻译为不同SQL

同样的LINQ 被翻译为不同的SQL 语句 不同数据库方言不同 SOLServer: select top(3) * from t MySOL: select * from t LIMIT 3 Oracle: select * from t where ROWNUM<3 同样的C#语句在不同数据库中被EF Core翻译成不同的SQL语句 EF CORE迁移脚本和数据库相关 因此迁移脚…

Kafka系列(一)

内容 该系列主要是复习期间&#xff0c;通过浏览资料记录的一些笔记和重点&#xff0c;用于日常学习和学习后的总结。 组件概念 broker 一个Kafka的集群通常由多个broker组成&#xff0c;这样才能实现负载均衡、以及容错 broker是无状态&#xff08;Sateless&#xff09;的…

微信公众号对接--客服消息

当你关注公众号&#xff0c;然后在公众号里面发送消息&#xff0c;会收到回复&#xff0c;这个就是客服消息 参考文档:接收普通消息 接收事件推送 客服接口-发消息 想要对接客服消息&#xff0c;首先要获取access_token,这个可以参考我之前的文章:对接微信公众号-CSDN博客 回…

SpringBoot教程(九) | SpringBoot统一异常处理

SpringBoot教程(九) | SpringBoot统一异常处理 异常大家应该都很清楚&#xff0c;我们的项目总是不可避免的出现异常&#xff0c;那么应该如何优雅的进行异常处理使我们需要关注的一个问题&#xff0c;合理的异常封装既可以方便前端的处理&#xff0c;也能够简化后端的开发。 …

Stable Diffusion XL(SDXL)核心基础知识

文章目录 一、Stable Diffusion XL基本概念二、SDXL模型架构上的优化&#xff08;一&#xff09;SDXL的整体架构&#xff08;二&#xff09;VAE&#xff08;三&#xff09;U-Net&#xff08;四&#xff09;text encoder&#xff08;五&#xff09;refiner model 三、SDXL在训练…

通过OpenIddict设计一个授权服务器01-介绍

https://dev.to/robinvanderknaap/setting-up-an-authorization-server-with-openiddict-part-i-introduction-4jid 本文是使用OpenIddict设置授权服务器系列文章的一部分。本系列中的文章将引导您完成使用OpenIddict在ASPNET Core平台上设置OAuth2OpenID Connect授权服务器的…

软件测试|Python如何处理配置文件

配置文件在软件开发中起到了非常重要的作用&#xff0c;它允许开发者将应用程序的设置和参数存储在一个易于管理和修改的地方&#xff0c;而不是硬编码在代码中。Python有多种处理配置文件的方式&#xff0c;本文将介绍其中两种最常用的方法&#xff1a;使用configparser库和使…

Python: ** 的用处

在 Python 中&#xff0c;** 主要用于两个相关但不同的概念&#xff1a;解包&#xff08;unpacking&#xff09;和关键字参数&#xff08;keyword arguments&#xff09;的传递。让我们分别解释这两个方面。 1. 解包&#xff08;Unpacking&#xff09;&#xff1a; a. 解包字…

HTML--CSS--超链接样式以及鼠标样式自定义

超链接伪类 再复习一下,超链接的定义方式如下&#xff1a; <!DOCTYPE html> <html> <head> <title>这是一个标题</title><meta charset"utf-8"/><style></style> </head> <body><a href"http…

【go语言】结构体数据填充生成md错误码文件

这里使用pongo2这个模版引擎库进行md文件渲染GitHub - flosch/pongo2: Django-syntax like template-engine for Go package mainimport ("fmt""github.com/flosch/pongo2/v6""os" )func main() {// 假设有一个名为 data 的 map 数组data : []m…

Axure RP软件揭秘:设计师的秘密武器

Axure rp是一种快速原型设计工具&#xff0c;可以制作高度互动的HTML原型。设计师不仅可以使用Axure绘制线框图和原型&#xff0c;还可以在Axure rp中完成一系列用户体验设计。在本文中&#xff0c;我们将根据用户体验设计师的真实经验&#xff0c;触发用户体验设计师的实际工作…