Vue —— 进阶 vue-router 路由(二)(replace属性、编程式路由导航、缓存路由组件、路由的专属钩子)

简介: Vue —— 进阶 vue-router 路由(二)(replace属性、编程式路由导航、缓存路由组件、路由的专属钩子)

一、router-link 的 replace 属性

1. 作用

控制路由跳转时操作浏览器历史记录的模式。

2. 两种写入方式
  1. push:追加历史记录。(默认设置)
  2. replace:替换当前记录。
3. 开启 replace 模式
  //完整写法:
  <router-link :replace="true" ...>News</router-link>
  //简写:
  <router-link replace ...>News</router-link>
4. 实例:【进退两难】

https://www.bilibili.com/video/BV1RT4y1q7Ha?t=1.2

replace模式

App.vue

  1. replace 有两种编写方式,一般使用简写。
  <router-link :replace="true" class="list-group-item" active-class="active" :to="{name: 'guanyu'}">About</router-link>
    <router-link replace class="list-group-item" active-class="active" to="/home">Home</router-link>

二、编程式路由导航

1. 作用
  1. 不借助 <router-link> 实现路由跳转,让路由跳转更加灵活。
  2. 这样除了 <a> ,其他标签也可以使用路由导航(如:button等)
2. 具体编码

push

  this.$router.push({
    name: 'xiangqing',
    params: {
      id: xxx,
      title: xxx
    }
  })

replace

  this.$router.replace({
    name: 'xiangqing',
    params: {
      id: xxx,
      title: xxx
    }
  })

前进

  this.$router.forward()

后退

  this.$router.back()

前进或后退(自定义步数)

  this.$router.go(n) //n为整数(正/负)
3. 实例:使用按钮实现跳转

https://www.bilibili.com/video/BV1R94y1U7h3?t=2.9

编程式路由导航

Banner.vue

    <div class="page-header"><h2>Vue Router Demo</h2></div>
    <button @click="back">后退</button>
    <button @click="forward">前进</button>
    <button @click="test">后退两步</button>
    methods: {
      back() {
        this.$router.back();
      },
      forward() {
        this.$router.forward();
      },
      test() {
        this.$router.go(-2);
      }
    }

Message.vue

  <button @click="pushShow(m)">push</button>
  <button @click="replaceShow(m)">replace</button>
    methods:{
    pushShow(m) {
      this.$router.push({
        name: "xiangqing",
        params: {
          id: m.id,
          title: m.title,
        }
      })
    },
    replaceShow(m) {
      this.$router.replace({
        name: "xiangqing",
        params: {
          id: m.id,
          title: m.title,
        }
      })
    }
   }

三、缓存路由组件

1. 作用

默认情况下,不展示的路由组件是会自动销毁的,缓存路由组件就是让不展示的路由组件保持挂载,不被销毁。

2. 具体代码

使用 <keep-alive> 标签,注意是写在用于展示的组件里。

include="myNews" 表示只对 News 组件缓存,myNews 是定义的 News 组件的 name 名。

  //缓存一个路由组件
  <keep-alive include="myNews">
      <router-view></router-view>
  </keep-alive>


  //缓存多个路由组件
  <keep-alive :include="['myNews', 'myMessage']">
      <router-view></router-view>
  </keep-alive>
3. 实例:对指定路由的缓存

https://www.bilibili.com/video/BV1ig411o795?t=0.9

路由缓存

News.vue

  <template>
    <ul>
      <li>news001 <input type="text"></li>
      <li>news002 <input type="text"></li>
      <li>news003 <input type="text"></li>
    </ul>
  </template>
  <script>
  export default {
    name: "myNews",
    beforeDestroy(){
      console.log('New组件即将被销毁');
    }
  };  
  </script>

Home.vue

  1. 如果不在 <keep-alive> 中配置 include 属性,那么 Home 组件中展示的所有路由都会缓存。
  2. 通过 include='xxx',我们可以指定要缓存的路由。
  <template>
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul class="nav nav-tabs">
          <li>
            <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
          </li>  
          <li> 
            <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
          </li>
        </ul> 
        <keep-alive include="myNews">
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: "myHome",
  };
  </script>

四、两个新的生命周期钩子

1. 作用

路由组件所 独有的 两个钩子,用于捕获路由组件的激活状态。

2. 具体名字
  1. activated:路由组件被 激活时 触发。
  2. deactivated:路由组件 失活时 触发。
3. 实例:路由不被销毁并让定时器失活

https://www.bilibili.com/video/BV1PT4y1B7a3?t=0.8

路由的两个钩子

News.vue

  <template>
    <ul>
      <li :style="{opacity}">认真学习Vue</li>
      <li>news001 <input type="text"></li>
      <li>news002 <input type="text"></li>
      <li>news003 <input type="text"></li>
    </ul>
  </template>
  <script>
  export default {
    name: "myNews",
    data(){
      return{
        opacity: 1
      }
    },
    activated() {
      console.log('News组件被激活了');
      this.timer = setInterval(() => {
        console.log('@');
        this.opacity -= 0.01
        if(this.opacity <=0 ) this.opacity = 1
      },16)
    },
    deactivated() {
      console.log('News组件失活了');
      clearInterval(this.timer)
    }
  };  
  </script>

Home.vue

  <keep-alive include="myNews">
      <router-view></router-view>
    </keep-alive>

不积跬步无以至千里 不积小流无以成江海

相关文章
|
3天前
|
存储 资源调度 JavaScript
Vue.js组件通信策略详解
【7月更文挑战第17天】通过以上几种策略,Vue.js 提供了灵活且强大的组件间通信能力,使得开发者可以构建出结构清晰、易于维护的大型应用。
|
1天前
|
存储 缓存 JavaScript
Vue的缓存组件
Vue的缓存组件
9 2
|
9天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
22 6
|
5天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
14天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
23 1
|
15天前
|
JavaScript API
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
21 1
|
17天前
|
JavaScript 编译器
|
9天前
|
JavaScript
【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view
【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view
11 0
|
15天前
|
JavaScript
vue3 【实战】封装 “心跳“ 组件
vue3 【实战】封装 “心跳“ 组件
18 0
|
15天前
|
JavaScript 前端开发 程序员
Vue组件化、单文件组件以及使用vue-cli(脚手架)
Vue组件化、单文件组件以及使用vue-cli(脚手架)
32 0