Vue2学习总结-路由vue-router_sinat_29304113的博客-CSDN博客

vue-router

定义:一个用于开发 SPA 应用程序的 Vue 插件库。
什么是路由:

1. 线路是地图关系的集合,许多线路需要路由器管理。
2. 路径是一个关键。 价值可能是功能性的或可比较的 。
   

SPA应用的理解

3. 单页Web应用
4. 这个节目只有一整页(由Flickr用户html(CC BY-NC-SA 2.
5. 如果您点击导航链接, 网站不会刷新。 仅进行本地页面更新 。
6. Ajax的要求必须用来访问数据。

路由的分类

路由基本使用

7. 安装 vue- rooter 命令行工具 。npm i vue-router
8. 引入import VueRouter from ''vue-router
9. 使用Vue.use(VueRouter )
10. 创建根配置

main.js

router/index.js

抱歉, 但 App. vue 完成切换( 活动类可以配置突出显示的样式) 。

注意事项

1. 路径组件通常保存在页文件夹中,而标准组件通常存储在组件文件夹中,而标准组件通常存储在组件文件夹中,而标准组件通常存储在组件文件夹中。
2. 通过切换, 默认删除“ 隐藏” 路径部件, 并按需要安装 。
3. 每个组件都有自己的$route用于存储您自己的路径信息的属性 。
4. 在整个应用过程中,只有一个根子。$router属性获取到。

嵌套（多级）路由

1. 配置路线规则, 使用“ 儿童配置” 配置项目 :

跳动( 写入整个路径) :

路由传参query

查询路由参数

1. 传递参数

方式一：

方式二：

2. 接收参数$route.query.id

命名路由

1. 角色:道路跳跃简化了。
2. 如何使用：
   （1）给路由命名：

（2）简化跳转

路径图的参数

设置路线并宣布接受帕拉姆斯参数。

传递参数

注意: 路由器有参数参数参数参数; 如果您使用到目标函数, 您不能使用路径配置; 相反, 您必须使用名称配置!
接收参数$route.params.title

路径图的参数

使路线部件更容易获得参数。
传递参数

接收参数props: ["id", "title"]

<router-link>属性应该替换 。

1. 激活: 浏览器历史记录在控制路径跳中运行的方式 。
2. 浏览器的历史记录以两种方式写成: 推和替换。 推是额外的历史记录, 而替换则是现有记录的替代。 路由器以推的方式默认跳跃 。
3. 要激活替换模式,请遵循这些步骤:<router-link replace......>xxxx</router-link>

编程式路由导航

1. 作用:提高跳跃路线的灵活性,而无需实现。
2. 具体编码：

缓存路由组件

1. 激活:防止销毁不明路线部件。
2. 具体编码：

3. 所有组件都缓存, 即使包含的部件没有写入 。

新颖生命周期钩(附加途径)

1. 激活: 有两个钩子, 具体针对路由部件, 捕捉路由部件的主动状态 。
2. 名称( 在缓存中)
   已激活
   解除活动

路由守卫 （权限）

1. 启动:路线出入控制
2. 全球警卫、独家警卫和部分警卫是三种类型的警卫。

独享路由守卫

组件内路由守卫

Hashtag 和历史

1. 我该用什么大麻做 URL? # 和大麻是它背后的东西。
2. HTTP 请求中将省略散列值, 也就是说, 散列值将不会传送到服务器 。
3. hash模式：
   地址总是##;
   (2) 如果地址后来通过第三方移动电话App共享,如果申请经过适当审查,该地址将被定为非法。
   （3）兼容性较好。
4. 历史模式 :
   (1) 美丽和干净的地址。
   (2) 兼容性和散列形态略有恶化。
   (3) 利用在线部署,必须提供后端支持,以解决更新网页服务器404终端的问题。

本文由 在线网速测试 整理编辑，转载请注明出处，原文链接：https://www.wangsu123.cn/news/14871.html。