Vue学习第30天——router-link的push和replace属性

一、浏览器历史记录两种写入方式

浏览器储存点击页面历史记录，默认是以堆栈的形式存储
① push：追加历史记录
② replace：替换当前的记录

二、<router-link>中的push和replace属性

1、作用

路由跳转时，控制浏览器历史记录模式

2、理解

控制路由跳转历史记录

3、用法

① push：追加历史记录（路由跳转时默认为push）
<router-link to="/cats" push>猫咪信息展示</router-link>

② replace：替换当前的记录
<router-link to="/dogs" replace>狗狗信息展示</router-link>

4、注意点

<router-link> 不支持 target="_blank"，如果你想打开一个新标签页，必须用 <a> 标签

三、代码示例

点击router-link标签，在页面进行切换的时候，地址栏默认是以push的形式进行堆栈

<template>
  <div id="app">
      <router-link to="/cats" push>猫咪信息展示</router-link>&ensp;
      <router-link to="/dogs" push>狗狗信息展示</router-link>
      <router-view></router-view>
  </div>
</template>

通过replace配置项，控制页面反复使用浏览器的返回操作

<template>
  <div id="app">
      <router-link to="/cats" replace>猫咪信息展示</router-link>&ensp;
      <router-link to="/dogs" replace>狗狗信息展示</router-link>
      <router-view></router-view>
  </div>
</template>

router-link的replace属性，防止页面可重复使用浏览器的返回操作

四、完整代码

App.vue

<template>
  <div id="app">
      <!-- 默认值为push -->
      <!-- <router-link to="/cats" >猫咪信息展示</router-link>&ensp;
      <router-link to="/dogs" >狗狗信息展示</router-link> -->

      <!-- replace控制浏览器后退与前进 -->
      <router-link to="/cats" replace>猫咪信息展示</router-link>&ensp;
      <router-link to="/dogs" replace>狗狗信息展示</router-link>
      <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>
<style>
  a {
    text-decoration: none;
  }
</style>

router/index.js

import Vue from "vue";
import VueRouter  from "vue-router";

Vue.use(VueRouter);

import Cats from "../pages/Cats";
import Dogs from "../pages/Dogs";

export default new VueRouter({
    routes:[
        {
            path:'/cats',
            component:Cats,
        },
        {
            path:'/dogs',
            component:Dogs,

Cats.vue

<template>
  <div>
    <h3>猫咪</h3>
  </div>
</template>

<script>
export default {
  name:"Cats",
}
</script>

Dogs.vue

<template>
  <div>
    <h3>狗狗</h3>
  </div>
</template>

<script>
export default {
  name:"Dogs",
}
</script>

运行结果