Lison《vue技术栈开发实战》（一）

第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进行包裹

设置页面进入和离开的效果，同时也可以将动态效果设置成变量，通过参数启动动态效果