路由,router。

vue的路由的使用【重要】_服务器


SPA应用。页面不重新刷新。

浏览器的路径发生变化,router就会检测到,就会切换组件。

vue的路由的使用【重要】_缓存_02

vue-router的理解

vue的路由的使用【重要】_数据_03

对SPA应用的理解

vue的路由的使用【重要】_数据_04

路由的理解

vue的路由的使用【重要】_缓存_05


vue的路由的使用【重要】_前端_06

vue-router的使用

vue的路由的使用【重要】_vue.js_07


注意vue2中应该使用vue-router3,不然会报错。

vue的路由的使用【重要】_服务器_08


vue的路由的使用【重要】_vue.js_09


创建文件。

vue的路由的使用【重要】_缓存_10


vue的路由的使用【重要】_数据_11


vue的路由的使用【重要】_数据_12


标签页。

vue的路由的使用【重要】_前端_13


增加点击样式。

vue的路由的使用【重要】_缓存_14


vue的路由的使用【重要】_数据_15

总结

vue的路由的使用【重要】_数据_16


vue的路由的使用【重要】_前端_17

文件分类

前者放一般组件,后者放路由组件。

vue的路由的使用【重要】_前端_18


vm实例。

vue的路由的使用【重要】_前端_19


vue的路由的使用【重要】_vue.js_20

总结

vue的路由的使用【重要】_vue.js_21

嵌套路由

vue的路由的使用【重要】_前端_22


vue的路由的使用【重要】_数据_23

总结

vue的路由的使用【重要】_缓存_24

query参数

vue的路由的使用【重要】_缓存_25


拿到对应的数据。

vue的路由的使用【重要】_前端_26


使用模块字符串。

vue的路由的使用【重要】_服务器_27


两种写法:

vue的路由的使用【重要】_vue.js_28

总结

vue的路由的使用【重要】_前端_29

命名路由

配置name属性。

vue的路由的使用【重要】_数据_30


直接写名字。

vue的路由的使用【重要】_缓存_31


使用name跳转路由。

vue的路由的使用【重要】_前端_32

总结

vue的路由的使用【重要】_前端_33


vue的路由的使用【重要】_数据_34

params参数

vue的路由的使用【重要】_前端_35


路由需要设置参数。

vue的路由的使用【重要】_服务器_36

vue的路由的使用【重要】_服务器_37


vue的路由的使用【重要】_缓存_38


params参数只能和name一起,不能是路径。

总结

vue的路由的使用【重要】_vue.js_39


vue的路由的使用【重要】_服务器_40


vue的路由的使用【重要】_服务器_41

路由的props配置

vue的路由的使用【重要】_前端_42


vue的路由的使用【重要】_前端_43


vue的路由的使用【重要】_前端_44


vue的路由的使用【重要】_服务器_45


vue的路由的使用【重要】_数据_46


解构赋值。

vue的路由的使用【重要】_vue.js_47


解构赋值的连续写法。

vue的路由的使用【重要】_服务器_48

总结

vue的路由的使用【重要】_缓存_49

router-link的replace属性

​push​​​方式和​​replace​​方式。

默认就是push模式。

开启replace模式。

vue的路由的使用【重要】_数据_50


vue的路由的使用【重要】_vue.js_51

编程式路由导航

写在方法里。

vue的路由的使用【重要】_前端_52


回退和前进。

vue的路由的使用【重要】_前端_53


vue的路由的使用【重要】_前端_54

总结

vue的路由的使用【重要】_前端_55

缓存路由组件

全部都被缓存。

vue的路由的使用【重要】_前端_56


没有必要,我们只需要缓存有数据的组件,写的是组件名,不是路由名。

vue的路由的使用【重要】_服务器_57


vue的路由的使用【重要】_前端_58

两个新的生命周期钩子

写多个组件的名字。

vue的路由的使用【重要】_前端_59


路由组件独有的生命周期钩子。

vue的路由的使用【重要】_缓存_60


vue的路由的使用【重要】_数据_61

总结

vue的路由的使用【重要】_服务器_62

全局前置-路由守卫

路由守卫:保护路由的权限。

在路由中配置。

vue的路由的使用【重要】_服务器_63


vue的路由的使用【重要】_数据_64

vue的路由的使用【重要】_vue.js_65


meta。路由元信息。

vue的路由的使用【重要】_vue.js_66


vue的路由的使用【重要】_数据_67

全局后置-路由守卫

vue的路由的使用【重要】_缓存_68


vue的路由的使用【重要】_缓存_69


不点的时候也显示名字。

vue的路由的使用【重要】_服务器_70


上面的是有bug的,比较麻烦。我们使用后置路由守卫。

vue的路由的使用【重要】_前端_71

独享路由守卫

配置在每个路由里面。

vue的路由的使用【重要】_数据_72


没有独享的后置路由守卫。

总结

vue的路由的使用【重要】_前端_73


vue的路由的使用【重要】_服务器_74

组件内路由守卫

vue的路由的使用【重要】_缓存_75


vue的路由的使用【重要】_vue.js_76


vue的路由的使用【重要】_vue.js_77


vue的路由的使用【重要】_服务器_78

总结

vue的路由的使用【重要】_vue.js_79

history模式和hush模式

vue的路由的使用【重要】_数据_80


默认的模式是hash模式。我们可以修改模式。

vue的路由的使用【重要】_前端_81


hash模式的兼容性比较好。

项目需要上线,我们需要打包,生成原始的.html,.js,.css等文件,使用npm run build进行打包。生成一个dist文件。打包出来的文件,必须放在服务器上面进行部署才能看见我们的页面。

使用node、express搭建一个服务器

vue的路由的使用【重要】_vue.js_82


选一个名字。

vue的路由的使用【重要】_数据_83


之后进行回车就可以。

vue的路由的使用【重要】_vue.js_84

vue的路由的使用【重要】_服务器_85


创建一个微型的服务器,然后我们启动服务器。

vue的路由的使用【重要】_数据_86


前端静态资源的放置位置。也可以叫public。

vue的路由的使用【重要】_vue.js_87


静态资源让服务器认识,指定静态资源。

vue的路由的使用【重要】_数据_88


history模式下出现404问题,因为这个模式会将地址栏的所有路径当做路径去请求数据,但是在后端服务器我们找不到数据。一刷新的话,需要后端人员配合。

使用服务器的中间件。

vue的路由的使用【重要】_缓存_89


安装一下。

vue的路由的使用【重要】_缓存_90


使用一下这个中间件。

vue的路由的使用【重要】_前端_91

总结

vue的路由的使用【重要】_服务器_92