2022-10-25 vue的声明式导航和编程式导航的定义和写法区别

声明式导航

在浏览器中，点击链接实现导航的方式，叫做声明式导航

使用场景

• 在网页中点击<a>链接实现网页的切换；
• 在Vue项目中点击<router-link></router-link>切换组件

声明式导航新老版本的写法

• 1.使用a标签实现网页切换

<li><a href="/#/films">电影</a></li>
<li><a href="/#/cinermas">影院</a></li>
<li><a href="/#/center">我的</a></li>

• 2.使用router-link实现声明式导航:dom结构自带a标签

<li><router-link to="/films">电影</router-link> </li>
<li><router-link to="/cinermas">影院</router-link> </li>
<li><router-link to="/center">我的</router-link> </li>

也可以添加自定义 class 属性名，然后添加样式。

 <li><router-link to="/films" router-link-active="myclassactive">电影</router-link> </li>

• 3.使用<router-link tag='li'></router-link>代替<li><router-link></router-link></li>

<router-link to="/films" tag='li'>电影</router-link>
<router-link to="/cinermas" tag='li'>影院</router-link>
<router-link to="/center" tag='li'>我的</router-link>

此时会获得一个警告: tag属性已弃用,应使用v-slot代替

vue-router.esm.js?8c4f:16 [vue-router]
 <router-link>'s tag prop is deprecated and has been removed in Vue Router 4. 
 Use the v-slot API to remove this warning:

出现这个警告，是因为在 vue router4 中需要按照下面这个方法来写:

• 4.使用<router-link custom v-slot="{navigate,isActive}"></router-link>实现声明式导航

<router-link to="/films" custom v-slot="{navigate,isActive}">
  <li @click="navigate" :class="isActive?'myactive':''">
    电影--{{isActive}}
  </li>
  </router-link>
  <router-link to="/cinermas" custom v-slot="{navigate,isActive}">
  <li @click="navigate" :class="isActive?'myactive':''">
    影院--{{isActive}}
  </li>
  </router-link>
  <router-link to="/center" custom v-slot="{navigate,isActive}">
  <li @click="navigate" :class="isActive?'myactive':''">
    我的--{{isActive}}
  </li>
  </router-link>

编程式导航

在浏览器中，调用API方法实现导航的方式，叫做编程式导航

使用场景

• 在普通的网页中我们会去掉用location.href跳转到新页面
• 在vue-router中调用API方法实现导航

常见编程式导航API

this.$router.push('Hash地址')//跳转到指定Hash地址，且增加一条历史记录
this.$router.replace('Hash地址')//跳转到指定Hash地址，且替换掉当前历史记录
this.$router.go('Number')//在浏览器历史记录中前进或者后退（1、-1......）,如果超出上限的话，则原地不动

示例

App.vue

<template>
  <div>
      <button @click="fn">点击</button>
  </div>
</template>
<script>
import router from "vue-router"// 导入vue-router
export default {
    methods:{
    fn(){
      this.$router.replace("Center");
    }
  }
};
</script>

效果:点击后从http://localhost:8080跳转到http://localhost:8080/#/Center