Lison《vue技术栈开发实战》（一）
Lison《vue技术栈开发实战》（一）
- 第01章 使用vue-cli3创建项目
- 使用Vue UI创建、管理项目
- 项目结构目录整理
- 初始文件添加
- 基本配置详解
- 使用代理解决跨域
- 第02章 路由基础篇
- router-link和router-view组件
- 路由配置
- JS操作路由
- 重定向和别名
- 第03章 路由进阶篇
- 路由组件传参
- HTML5 History模式
- 导航守卫
- 路由元信息
- 过渡效果
第01章 使用vue-cli3创建项目
使用Vue UI创建、管理项目
cmd中输入vue ui进行启动，
项目结构目录整理
创建后的基本目录：
初始文件添加
看下文件补充后的目录：
基本配置详解
进行路由配置：
使用代理解决跨域
配置devServer来完成跨域的需求：
第02章 路由基础篇
router-link和router-view组件
通过router-link跳转的组件都会在router-view来渲染
看下路由的基本配置：
其中第二种写法起到一个懒加载的作用，只有当页面访问到这个路径时才会去加载相应的组件
路由配置
a)动态路由
页面使用
b)嵌套路由
c)命名路由
为路由添加命名
to属性绑定到对象上
d)命名视图
用于在页面显示多个视图
页面创建路由
看下页面效果：
JS操作路由
这个to打印的结果是：
可以在to中实现一些逻辑
添加click按钮返回上一页
也可以跳转到指定页面
也可以为页面添加参数
重定向和别名
重定向：
也可以返回一个路径
别名（通过alias设置别名）：
这样访问home_page和访问首页进的就是一个页面了
第03章 路由进阶篇
路由组件传参
router会导致的一个问题是页面组件和路由进行了高度耦合，为了解耦会用到路由组件传参，我们修改动态路由：
方法一：
将props设置为true
页面中便可以直接拿到这个参数了。
方法二：
通过props传递
页面调用方式
方法三：
通过query传入：
HTML5 History模式
mode的默认值是hash模式
就是在路由中有一个#，在#做路由的变化是不进行页面的刷新的，当我们在正式环境不想看到页面的变化时就得使用History模式，使用了history模式后，所有匹配不到的页面都会指向index.html
此时需要指定匹配不到页面的情况：
导航守卫
导航守卫是在实际项目开发中都会用到的内容，它能帮我们在路由发生跳转到导航结束这段时间内做一些相应的逻辑处理。
全局守卫：比如跳转页面时判断用户是否登录等
路由守卫：
这里必须要调用next()钩子，不然不会完成跳转。
这里注意必须在页面渲染完成才能调用组件的实例。
看一个完整的导航解析流程：
路由元信息
页面的meta字段可以配置一些路由元信息：
在守卫中添加信息：
过渡效果
用transition-group进行包裹
设置页面进入和离开的效果，同时也可以将动态效果设置成变量，通过参数启动动态效果
Lison《vue技术栈开发实战》（一）相关推荐
- Lison《vue技术栈开发实战》（二）
Lison<vue技术栈开发实战>(二) 状态管理bus的使用 父子组件通信 v-model语法糖 使用bus通信 状态管理Vuex(一) state和getter 辅助函数的使用 模块中 ...
- Lison《vue技术栈开发实战》（三）
Lison<vue技术栈开发实战>(三) Ajax请求实战 解决跨域问题 封装axios 请求拦截 响应拦截 队列管理 使用Mock模拟Ajax请求 响应模拟 Mock用法精讲 数据模板 ...
- Lison《vue技术栈开发实战》（四）
Lison<vue技术栈开发实战>(四) 从SplitPane组件谈Vue中"操作"DOM 简单两列布局 如何让两个div改变宽度 鼠标拖动效果 v-model和.sy ...
- ehcache springboot_阿里内部进阶学习SpringBoot+Vue全栈开发实战文档
前言 Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置烦琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能 ...
- 《Spring Boot+Vue全栈开发实战》读书笔记
写在前面 嗯,回家处理一些事,所以离职了,之前的公司用开源技术封装了一套自己的低代码平台,所以之前学的spring Boot之类的东西都忘了很多,蹭回家的闲暇时间复习下. 笔记整体以 Spring B ...
- Spring Boot+Vue全栈开发实战——花了一个礼拜读懂了这本书
很幸运能够阅读王松老师的<Spring Boot+Vue全栈开发实战>这本书!之前也看过Spring Boot与Vue的相关知识,自己也会使用了Spring Boot+Vue进行开发项目. ...
- 读书笔记《Spring Boot+Vue全栈开发实战》(下)
本书将带你全面了解Spring Boot基础与实践,带领读者一步步进入 Spring Boot 的世界. 前言 第九章 Spring Boot缓存 第十章 Spring Boot安全管理 第十一章 S ...
- 《SpringBoot+vue全栈开发实战项目》笔记
前言 Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置繁琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能 ...
- SpringBoot+vue全栈开发实战笔记太香了
Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置繁琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能够快速 ...
最新文章
- Postman 调试技巧
- CentOS 7.6 搭建Gitlab教程
- 非常复杂，上双11数据大屏背后的秘密：大规模流式增量计算及应用
- 【MFC】MFC对话框类
- master分支删除文件_Git分支基础简介；创建分支；合并分支；删除分支；
- rez注入器源码_CF-rez-Tool crossfire的REZ文件全套修改工具 - 下载 - 搜珍网
- CnBlogs博文demo演示技巧比较：jsfiddle完胜
- 给定两个水壶，一个可以装4升水，一个能装3升水，水壶上没有任何度量标记。有一水龙头可以用来往壶中灌水。问题是怎样在能装4升的水壶里面恰好只装2升水
- Spark实践的阶段性总结
- 西安电子科技大学07级计算机学院本科生毕业照.,关于对我校2015届本科“优秀毕业生标兵”、“优秀毕业生”和“优秀学生干部”评选结果进行公示的公告...
- mysql查询时 全外連接_MySQL数据库左外连接、右外连接、全外连接
- ，智商达到140及以上可以称之为天才
- 黄金分割法 c语言程序,优化程序-黄金分割法C语言程序设计
- win10自带sftp服务器_FreeSSHD在Windows环境下搭建SFTP服务器
- 继续教育公需课——人工智能技术及其发展趋势答案
- 2022年股权转让怎么计算个人所得税
- 有关weka的相关问题
- Java实现文件拷贝，以及修改文件扩展名
- 人间简史从动物到上帝读后感_从我的博客到上帝的耳朵...
- 南京理工大学计算机学院张勇,2015年南京理工大学研究生数模竞赛获奖名单