Vuerouter路由

梦里梦外; 2023-03-04 09:17 102阅读 0赞

1. 前/后端路由

1. 后端路由

  1. 一个url（uniform resource location）对应一个页面
  2. 在页面地址跳转时，后台会根据url地址返回新的页面内容（后台在内部使用后台模板+数据渲染生成一个html字符串返回给前端浏览器），然后浏览器去解析这个字符串，构建dom树，css树，合并生成渲染树renderTree，根据内容的不同生成渲染层 和 合成层，然后调用gpu去渲染页面到屏幕上
  3. 每次切换路由，后台返回新的页面内容，浏览器等待这个新内容时有白屏时间，每个页面之间的有些资源是共用的，重复再次获取带来带宽等各种浪费
  4. 后台路由每次返回的页面都是已经完成生成好的，可以被搜索引擎抓取收录，seo优化比较好

2. 前端路由

  1. 通过不同的事件（可以是按钮点击事件，也可以是hash、history路由的切换事件），来去渲染不同的视图，这个视图的数据就通过ajax来获取，所以只需要获取对应的资源，不需要完整的获取所有资源；同时也没有等待的白屏时间。
  2. 前端路由的页面，只有初始时的空白页面或者一部分内容，后续的页面是根据用户操作才产生的，所以搜索引擎抓不到，不利于seo优化

2. vue-router的使用

  1. 定义路由地址（使用hash方式那就是hash值）和 组件之间的对应关系。经常称为路由中心
  2. 定义何时触发路由跳转： router-link组件来控制路由跳转，该组件写在哪就表示在哪生成一个a标签做跳转，跳转的目标地址，由router-link的to属性声明
  3. 定义匹配到的路由地址对应的组件的显示位置：router-view组件做占位符，被匹配到的组件替换router-view组件所在的位置
  4. 把路由实例挂载到vue的实例，在new Vue时传递router配置，配置项的值就是router的实例

3. $route $router routes区分

  1. routes定义所有的路由
  2. r o u t e 表 示 路 由 数 据 ， 含 有 当 前 路 由 的 数 据 ： 如 ‘ route 表示路由数据，含有当前路由的数据：如` route表示路由数据，含有当前路由的数据：如‘route.params路由动态参数，$route.query`路由查询参数等数据
  3. $router 路由器，能够执行路由功能，比如前进、后退、替换等等。【带er的一般是个拟人化表示，表面这是一个能够执行某种功能的（比如webpack的loader加载器）】

4. 编程式导航

  1. 声明式： 使用标签声明要跳转的路径和参数 <router-link to="跳转的路径 参数">跳转说明文字</router-link>

  2. 编程式：使用js的方式来进行跳转

    1. this.$router.push() 跳转到某个页面地址
    2. this.$router.go(n)进行前进或者后退到第n个页面

    3. push方法需要额外注意的地方：对含有动态参数的路由，在使用path属性定义跳转路径时不要只固定部分，如下

      1. // 路由规则部分
      2. routes: [
      3.     { path: 'user/:id', component: User, name: 'aaa'}
      4. ]
      6. # 错误示范
      7. // 使用编程式跳转到该路径：错误示范，path含有两部分，这样定义只写了一部分，将不会匹配到上面的规则
      8. this.$router.push({ path: '/user', { params: { id: 13}}}) 
      10. // 正确方式1： 13可以用实际的变量
      11. this.$router.push({ path: '/user' + 13})
      13. // 正确方式2： 或者使用命名路由 先给上面的路由起名字aaa (随意起，将来一定要起见名知意的)
      14. this.$router.push({ name: 'aaa', { params: id: 123}})

路由导航守卫

在这里插入图片描述
To要去的页面
Form 从哪个页面过来
Next 进行到下一步 next( ) 可以携带参数，参数可以是你想要到达的路径 如果不带参数就是to要去的路径

  1. // 挂载路由导航守卫
  2. router.beforeEach((to, form, next) => { 
  3.     // to要去的路径，form从那个路径过来，next函数 放行
  4.     if (to.path === '/login') return next();
  5.     // 首先获取token令牌
  6.     const tonkenStr = window.sessionStorage.getItem('token');
  7.     if (!tonkenStr) return next('/login');
  8.     next();
  9. });

props解耦路由

props
类型：Array | Object

详细：【官网解释】

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

你可以基于对象的语法使用以下选项：

type： 可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。

default：any
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。

required：Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。

validator：Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

首先要在router/index.vue所需要传参的路由上，开启路由的传参
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，102人围观）

还没有评论，来说两句吧...

相关阅读

    相关 IP路由__静态路由

    .静态路由的优缺点： 　　优点：对于路由器的CPU没有管理性开销，它意味着如果你不使用动态路由选择的话，你可能应该购买更为便宜的路由器。在路由器之间没有带宽占用，它意味...

    Dear 丶Dear 丶/ 0 赞/ 187 阅读

    相关 VueRouter路由嵌套

    1. 前言 本小节我们介绍如何嵌套使用 VueRouter。嵌套路由在日常的开发中非常常见，如何定义和使用嵌套路由是本节的重点。同学们在学完本节课程之后需要自己多尝试配置

    怼烎@怼烎@/ 0 赞/ 212 阅读

    相关 VueRouter路由传参

    1. 前言 本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 199 阅读