不同的页面通常对应着不同的路由。通过路由跳转，用户可以点击链接、按钮或执行特定的操作来切换到其他页面。这样做的好处是，可以根据不同的路由展示不同的内容，提供更好的用户体验和导航方式。

我们这里用到的代码示例接上篇文章《Vue Router 新手入门指南（1）：路由怎么使用？》中创建的vue-router项目。

router-link

第一个就是我们之前已经用到的router-link标签啦，<router-link>是Vue Router提供的组件，它用于在单页面应用中实现路由跳转。你可以像使用普通的<a>标签链接一样使用<router-link>来进行页面之间的跳转。要加上to属性，值为你要跳去的页面的路径。

之后在页面上，就能点击首页就跳去首页的内容，点击沸点就跳去沸点的内容啦。

编程式路由跳转

第二种方法就是使用编程式路由跳转，通过this.$router.push()来跳。怎么使用呢？我们来看：

我们来到我们创建的沸点页面Hot.vue文件中，在它的内容中加一个button按钮，内容为"去课程页面"，给按钮绑定一个点击事件goClassPage。然后我们要到script中去定义这个方法，在这个方法中添加this.$router.push('/class'):

xml 复制代码

<template>
    <div>
        <h2>沸点页面</h2>
        <button @click="goClassPage">去课程页面</button>
    </div>
</template>

<script>
    export default {
       methods:{
          goClassPage(){
             this.$router.push('/class')
          } 
       } 
    }
</script>

<style lang="css" scoped>
</style>

那么现在我们去到页面上看，点击按钮也能去到课程页面了：

携带参数跳路由

需要携带参数跳路由会出现在什么场景呢？比如说你登录后跳转的页面需要根据你的信息来渲染，就像购物车里你添加了什么东西等等，那么就需要获取你的用户信息，从哪获取呢？就是你登录的时候输入的账号。

携带参数跳路由用到了我们说的第二种方法，且也有两种方式。

query

写法如下，path是我们想要跳去的页面，id是我们要带过去的参数：

php 复制代码

this.$router.push({path: '/class',query: {id: 123 }})

这样写后，我们能看到页面的地址栏就会带上我们传的id：

要在课程页面拿到我们传的参数需要在Class.vue中这么写，{{$route.query.id}}，注意是route，而我们之前传的时候是router：

xml 复制代码

<template>
    <div>
        <h2>课程页面</h2>
        <h3>{{$route.query.id}}</h3>
    </div>
</template>

现在从沸点页面点击按钮跳转到课程页面就能看到它已经出现了：

params

这种方式就需要到路由配置文件，router目录下的index.js里来，在配置课程页面的对象中，加一个name属性，值为class，path属性的值后加上/:id，然后在Hot.vue中跳路由的时候，把path: '/class'改为name: 'class'，然后用params:{ id: 456 }带上参数：

php 复制代码

 this.$router.push({name:'class',params:{id:456}})

要在课程页面拿到就要写{{ $route.params.id }}：

xml 复制代码

<template>
    <div>
        <h2>课程页面</h2>
        <h3>{{ $route.params.id }}</h3>
    </div>
</template>

此时点击按钮去到课程页面效果如下：

本文的知识到这就讲完啦，欢迎下次再来一起学习ヾ(◍°∇°◍)ﾉﾞ！！

Vue Router 新手入门指南（2）：路由跳转的方法及如何携带参数

router-link

编程式路由跳转

携带参数跳路由

query

params