【笔记整理】Vue Router路由管理器详解（尚硅谷vue学习资料总结）

      最后更新：2022-07-31 08:06:23 手机定位技术交流文章

      Vue Router路由管理器

      相关理解

      理解视路由器

      • 专门用于实现SPA应用程序的插件库

      对SPA应用的理解

      1. 单页 Web 应用（single page web application，SPA）
      2. 整个应用程序只有一个完整的页面
      3. 单击页面导航链接不会更新页面,而是只使页面局部更新
      4. 需要通过ajax请求获取的数据

      路由的理解

      什么是路由?

      路径是映射关系(关键值)的集合.
      key 为路径，value 可能是 function 或 componen
      路由分类

      后端路由：

      理解：value 是 function，用于处理客户端提交的请求
      工作过程:当服务器接收请求时,它根据请求路径找到相应的函数来处理请求,并返回响应数据

      前端路由：

      理解：value 是 component，用于展示页面内容
      工作过程:当浏览器路径更改时,显示相应的组件

      基本路由

      下载vue-router：npm i vue-router

      src/router/index.js:

      src/main.js:

      src/App.vue:

      src/components/Home.vue:

      src/components/About.vue:

      总结：

      1. 安装vue-router，命令：npm i vue-router

      2. 应用插件：Vue.use(VueRouter)

      3. 写路由器配置项目:

      4. 实现切换（active-class可配置高亮样式）：

      5. 指定展示位：<router-view></router-view>

      注意事项

      路由组件通常存放在pages文件夹,常用的组件通常存储在components文件夹

      通过交换,隐藏的路由器组件,默认被破坏,在需要时被上传

      每个组件都有自己的$route内部存储自己的路由信息的属性。

      整个应用程序只有一个路由器,可以通过组件访问$router属性获取到

      多级路由

      配置路由规则,使用儿童配置项目: 配置路由规则,使用儿童配置项目:

      跳跃(写完路径):<router-link to="/home/news">News</router-link>

      路由查询参数

      总结

      传递参数：

      接收参数：

      命名路由

      1. 功能:可以简化路由跳跃

      2. 如何使用：

        1. 给路由命名：

        2. 简化跳转：

      路由参数参数

      配置路由，声明接收params参数：

      传递参数：

      特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

      使用参数：

      路由建议配置

      功能:使路由组件更方便接收参数

      src/pages/Message.vue:

      src/router/index.js:

      src/pages/Detail.vue:

      路由跳跃的替换方法

      src/pages/Home.vue:

      总结：

      作用:路由器跳跃时控制浏览器历史记录的模式

      浏览器的历史记录有两种写入方式：push和replace，其中push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push方式

      打开替换模式:<router-link replace ...>News</router-link>

      编程式路由导航

      src/components/Banner.vue:

      总结：

      1. 作用：不借助<router-link>实现路由跳跃,使路由跳跃更灵活
      2. 具体编码：

      缓存路由组件

      总结：

      1. 功能:保持未显示的路由器组件悬挂而不被破坏

      2. 具体编码：

      activated和deactivated生命周期钩子

      当动态组件包装时,非主动组件的实例不会被缓存,而是被销毁。 这是一个抽象组件,它不会单独渲染 DOM 元素,并不会出现在母组件链中。
      谈到包装的组件,它将被缓存

      src/pages/News.vue:

      总结：

      1. activated和deactivated是路由组件的两个独特的钩子,用来捕捉路由组件的活化状态
      2. 具体使用：
        1. activated当激活时调度组件被触发
        2. deactivated路由组件失活时触发

      路由守卫

      全套前后行道警卫

      说明:

      一些前、中和后路径跳跃过程的钩函数用于验证。

      进哪路?

      去哪路?

      该函数决定是否显示您想要查看的路由页。

      src/router/index.js:

      独享路由守卫

      组件内路由守卫

      src/pages/About.vue:

      总结

      路由器的两个工作模式和历史

      对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值

      在HTTP请求中没有哈希值,即哈希值没有向服务器发送

      hash模式：

      在你的地址里总是带一个#号,这不漂亮
      如果地址后来通过第三方移动应用程序共享,如果应用程序被严格检查,地址将被标记为非法
      兼容性较好

      历史模式:

      地址干净，美观
      与兼容性和哈希模式略有不同
      在部署启动时需要后端支持,解决页面更新服务端404问题

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

          热门文章

          文章分类