当前位置:   article > 正文

vue的路由的使用_vue 路由 子目录

vue 路由 子目录

路由,router。
在这里插入图片描述
SPA应用。页面不重新刷新。
浏览器的路径发生变化,router就会检测到,就会切换组件。
在这里插入图片描述

vue-router的理解

在这里插入图片描述

对SPA应用的理解

在这里插入图片描述

路由的理解

在这里插入图片描述
在这里插入图片描述

vue-router的使用

在这里插入图片描述
注意vue2中应该使用vue-router3,不然会报错。
在这里插入图片描述
在这里插入图片描述
创建文件。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
标签页。
在这里插入图片描述
增加点击样式。
在这里插入图片描述
在这里插入图片描述

总结

在这里插入图片描述
在这里插入图片描述

文件分类

前者放一般组件,后者放路由组件。
在这里插入图片描述
vm实例。
在这里插入图片描述
在这里插入图片描述

总结

在这里插入图片描述

嵌套路由

在这里插入图片描述
在这里插入图片描述

总结

在这里插入图片描述

query参数

在这里插入图片描述
拿到对应的数据。
在这里插入图片描述
使用模块字符串。
在这里插入图片描述
两种写法:
在这里插入图片描述

总结

在这里插入图片描述

命名路由

配置name属性。
在这里插入图片描述
直接写名字。
在这里插入图片描述
使用name跳转路由。
在这里插入图片描述

总结

在这里插入图片描述
在这里插入图片描述

params参数

在这里插入图片描述
路由需要设置参数。
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
params参数只能和name一起,不能是路径。

总结

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

路由的props配置

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
解构赋值。
在这里插入图片描述
解构赋值的连续写法。
在这里插入图片描述

总结

在这里插入图片描述

router-link的replace属性

push方式和replace方式。
默认就是push模式。
开启replace模式。在这里插入图片描述
在这里插入图片描述

编程式路由导航

写在方法里。
在这里插入图片描述
回退和前进。
在这里插入图片描述
在这里插入图片描述

总结

在这里插入图片描述

缓存路由组件

全部都被缓存。
在这里插入图片描述
没有必要,我们只需要缓存有数据的组件,写的是组件名,不是路由名。
在这里插入图片描述
在这里插入图片描述

两个新的生命周期钩子

写多个组件的名字。
在这里插入图片描述
路由组件独有的生命周期钩子。
在这里插入图片描述
在这里插入图片描述

总结

在这里插入图片描述

全局前置-路由守卫

路由守卫:保护路由的权限。
在路由中配置。
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
meta。路由元信息。
在这里插入图片描述
在这里插入图片描述

全局后置-路由守卫

在这里插入图片描述
在这里插入图片描述
不点的时候也显示名字。
在这里插入图片描述
上面的是有bug的,比较麻烦。我们使用后置路由守卫。
在这里插入图片描述

独享路由守卫

配置在每个路由里面。
在这里插入图片描述
没有独享的后置路由守卫。

总结

在这里插入图片描述
在这里插入图片描述

组件内路由守卫

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

在这里插入图片描述

history模式和hush模式

在这里插入图片描述
默认的模式是hash模式。我们可以修改模式。
在这里插入图片描述
hash模式的兼容性比较好。
项目需要上线,我们需要打包,生成原始的.html,.js,.css等文件,使用npm run build进行打包。生成一个dist文件。打包出来的文件,必须放在服务器上面进行部署才能看见我们的页面。

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

在这里插入图片描述
选一个名字。
在这里插入图片描述
之后进行回车就可以。
在这里插入图片描述

在这里插入图片描述
创建一个微型的服务器,然后我们启动服务器。
在这里插入图片描述
前端静态资源的放置位置。也可以叫public。
在这里插入图片描述
静态资源让服务器认识,指定静态资源。
在这里插入图片描述
history模式下出现404问题,因为这个模式会将地址栏的所有路径当做路径去请求数据,但是在后端服务器我们找不到数据。一刷新的话,需要后端人员配合。
使用服务器的中间件。
在这里插入图片描述
安装一下。
在这里插入图片描述
使用一下这个中间件。
在这里插入图片描述

总结

在这里插入图片描述

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号