面试题：Vue路由跳转的四种方式

1.第一种：router-link（声明式路由）

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

router-link中常用的几个属性：

（1）to（string | Location）：表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

字符串型

<!-- 常规写法 -->
<router-link to="/home">Home</router-link>
<!-- router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 -->

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'/home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'/home'">Home</router-link>

对象型

<!-- 使用 name,path 都可以,建议使用 name -->


<!-- 不带参数 -->
<router-link :to="{name:'home'}">Home</router-link>

<router-link :to="{path:'/home'}">Home</router-link>


<!-- 带参数 -->
<!-- http://localhost:8080/home -->
<router-link :to="{name:'home',params:{id:123}}">Home</router-link>
     
<!-- http://localhost:8080/home?id=123 -->
<router-link :to="{path:'/home',query:{id:123}}">Home</router-link>

params和query传参的区别:

（1）query 传参配置的是path，而params传参配置的是name，在params中配置path无效。
（2）query传参类似于get，页面跳转之后URL后面会拼接参数；params传参类似于post，页面跳转之后URL后面不会拼接参数。

（3）query传参刷新页面参数不会消失(非重要性的参数可以这样传，像密码之类的参数还是用params传递比较好); params传参刷新页面参数会消失;

取值：

params取值---html 取参 $route.params.id

                       script 取参 this.$route.params.id

query取值---html 取参 $route.query.id

                    script 取参 $route.query.id

（2）replace（boolean，默认值为false）：设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

<router-link :to="{name:'home',params:{id:123}}" replace>Home</router-link>

<router-link :to="{path:'/home',query:{id:123}}" replace>Home</router-link>

（3）append（boolean，默认值为false）：设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{name:'home',params:{id:123}}" append>Home</router-link>

<router-link :to="{path:'/home',query:{id:123}}" append>Home</router-link>

（4）tag（string，默认值: "a"）：有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link :to="{name:'home',params:{id:123}}" tag="li">Home</router-link>

<router-link :to="{path:'/home',query:{id:123}}" tag="li">Home</router-link>

2.第二种：router.push()（编程式路由）

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL（返回到上一个页面）。

<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        // 不带参数
        this.$router.push('/home');
        this.$router.push({
          name: 'home'
        });
        this.$router.push({
          path: '/home'
        });


        // 带参数
        this.$router.push('/home?id=123');
        this.$router.push({
          name: 'home',
          params: {
            id: 123
          }
        });
        this.$router.push({
          path: '/home',
          query: {
            id: 123
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>

3.第三种：router.replace()（编程式路由）

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。当用户点击浏览器后退按钮时，则返回到上上一个页面。

<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        //不带参数
        this.$router.replace('/home');
        this.$router.replace({
          name: 'home'
        });
        this.$router.replace({
          path: '/home'
        });


        //带参数
        this.$router.replace('/home?id=123');
        this.$router.replace({
          name: 'home',
          params: {
            id: 123
          }
        });
        this.$router.replace({
          path: '/home',
          query: {
            id: 123
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>

4.第四种：router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步（向前或者向后跳转n个页面，n可为正整数或负整数），类似 window.history.go(n)。

<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {  
        // 在浏览器记录中前进一步，等同于 history.forward()
        this.$router.go(1);
        // 后退一步记录，等同于 history.back()
        this.$router.go(-1);
        // 前进 3 步记录
        this.$router.go(3);
      }
    }
  }
</script>

<style scoped>

</style>