【VUE】Vue-router路由

小草开花
232 阅读4分钟
  • vue-router是基于路由和组件：路由用户设定访问路径，将路径和组件映射起来；
  • 在vue-router的单页面应用中，页面的路径改变就是组件的切换。

（一）Vue-router的模式⭐⭐⭐⭐⭐

image.png

1. hash模式

git代码

  • hash也就是#，它是URL的锚点，表示的是网页中的一个位置
    hash的特点：它的改变不会导致页面重新加载，只是会触发hashchange事件
  • 监听hashchange事件实现前端路由，利用url中的hash来模拟一个hash，以保证url改变时，页面不会重新加载，也就是单页面应用了。
    hashchange事件可以获取到变化前后的url(包含hash值)： 
      window.addEventListener("hashchange", 函数, false);
  • vue-router 默认使用hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。
    hash模式是通过锚点值的改变，根据不同的值，渲染指定的DOM位置上不同的数据。
  • hash模式会创建hashHistory对象，在访问不同路由的时候，会发生两个操作：
    • ① HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶；
    • ② HasHistory.replace()替换到当前栈顶的路由。

2. history模式

pushState 和 replaceState。通过这两个 API ， 我们可以改变 URL 地址，并且浏览器不会向后端发送请求，同时还会触发popstate事件。通过这两个API和 通 popstate事件，我们就能⽤另外⼀种⽅式实现前端路由。 如果不想使用 #， 可以使用 vue-router 的另一种模式 history

 new Router({
   mode: 'history',
   routes: [ ]
 })

需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况， 因为没有当前的真正路径，要想解决这一问题需要后端配合，将不存在的路径重定向到入口文件。这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面

（二）Vue-router有哪几种钩子函数⭐⭐⭐⭐⭐

（1）beforeEach，参数有

  • to(Route路由对象)
  • from(Route路由对象)
  • next(function函数) 一定要调用才能进行下一步
    image.png （2） afterEach
    （3）beforeRouterLeave

（三）谈谈你对vue-router的 keep-alive 的理解⭐⭐⭐⭐⭐

1. 原理

  • Vue.js内部将DOM节点抽象成了一个个的VNode节点， keep-alive组件的缓存也是基于VNode节点的而不是直接存储DOM结构。
  • 它将满足条件（pruneCache与pruneCache）的组件在cache对象中缓存起来，在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。

2. 作用

实现组件缓存，保持这些组件的状态，以避免反复渲染导致的性能问题。 适合需要缓存组件 频繁切换，不需要重复渲染的情况

3.场景

tabs标签页 后台导航，vue性能优化

4. 使用

  • keep-alive 可以实现组件缓存，当组件切换时不会对当前组件进行卸载。
  • 常用的两个属性 include/exclude，允许组件有条件的进行缓存。 image.png image.png

5. 两个生命周期

activated/deactivated，用来得知当前组件是否处于活跃状态。

  • keep-alive 的中还运用了 LRU(Least Recently Used)算法。
    • keep-alive 有一个最大缓存限制，使用的是 LRU算法（最久未使用法，使用了就放到最上边，先删最下边）
  • router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存

（四）vue路由传参的三种基本方式

先有如下场景 点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

 <div class="examine" @click="insurance(2)">查看详情</div>

1. 方法一：路由path + id

特点：页面刷新数据不会丢失

（1）路由配置：path: '/particulars/:id，使用:/id来传递参数

{
    path: '/particulars/:id',
    name: 'particulars',
    component: particulars
}

（2）使用方式：直接调用$router.push实现携带参数的跳转

 methods：{
   insurance(id) {
         //直接调用$router.push 实现携带参数的跳转
         this.$router.push({
           path: `/particulars/${id}`,
         })
 }

可以看出需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值 另外页面获取参数如下

（3）获取参数：this.$route.params

 this.$route.params.id

2. 方法二：params传值

特点：页面刷新数据会丢失

（1）路由配置：不使用:/id来传递参数，因为组件中，而是使用params来携带参数。

  {
      path: '/particulars',
      name: 'particulars',
      component: particulars
    }

（2）使用方式：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

 methods：{
   insurance(id) {
        this.$router.push({
           name: 'particulars',
           params: {
             id //通过params来传递参数。
           }
         })
   }

（3）获取参数：this.$route.params.id 

 this.$route.params.id

3. 方法三：query传值

特点：使用path来匹配路由，然后通过query来传递参数，这种情况下query传递的参数会显示在url后面?id=？

（1）路由配置：路由配置：

 {
      path: '/particulars',
      name: 'particulars',
      component: particulars
    }

（2）使用方式：

 methods：{
   insurance(id) {
         this.$router.push({
           path: '/particulars',
           query: {
             id: id //通过query来传递参数
           }
         })
   }

（3）获取参数：this.$route.query.id

 this.$route.query.id

4.name+params

可以根据name匹配对应的路由，然后query传参，

 router.push({
    name: 'OceanOrderAddOrEdit',
    query: {
      sexOrderId: row.id,
      pageName: '海运出口订单维护2'
    }
  })

特别注意哦， 组件中 获取参数的时候是 route.params 而不是 router

avatar
文章
阅读
粉丝