VIP20/13_Vue/day-6/code/vue-router-navigation/src/App.vue

<template>
  <div id="app">
    <nav>
      <!-- 页面导航的方式：1 声明式导航 -->
      <!-- 在VueRouter中内置了 router-link组件 可以完成 声明式导航。通过 绑定to属性来指定导航模板地址 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <a href="#/about">关于</a> | <a href="/about">关于-错误</a> |
      <!-- router-link组件 对比 A标签 -->
      <!-- A. to属性直接绑定目标地址，router-link会根据路由模式 自动选择是否添加 "#";a 的话 需要自己手动选择是否添加-->
      <!-- B. a标签的href属性只能绑定 字符串类型；而to属性则可以绑定对象类型（路由信息对象） -->
      <router-link :to="{ path: '/about' }">关于</router-link> |
      <router-link :to="{ name: 'about' }">关于</router-link> |
      <!-- 下面 router-link组件添加了 replace属性。设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。 -->
      <router-link :to="{ name: 'about' }" replace="">关于</router-link> |

      <!-- 当 需要在页面间传参时 对象的绑定语法 会 比直接绑定字符串 更灵活 更简单 -->
      <!-- 页面导航的方式：2 编程（命令）式导航，就是通过router实例的方法来完成页面间跳转 -->
      <button @click="$router.push('/about')">关于</button> |
      <button @click="$router.push({ path: '/about' })">关于</button> |
      <button @click="$router.push({ name: 'about' })">关于</button> |
      <!-- router.push PK router.replace -->
      <!-- 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。 -->
      <!-- router.go(n) 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。 -->
      <!-- router.forward  ==> router.go(1) -->
      <!-- rotuer.back  => router.go(-1) -->
    </nav>
    <router-view />
  </div>
</template>

<script>
/**
 *! 页面栈
 ** 在VueRouter中，当页面跳转时 会有一个数据结构（页面栈）来存储所有用户导航过的页面。
 */
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>