Vue前端开发-路由跳转及带参数跳转

在Vue 3中，由于没有实例化对象this，因此，无法通过this去访问 $route对象，而是通过导入一个名为 useRouter 的方法，执行这个方法后，返回一个路由对象，通过这个路由对象就可以获取到当前路由中的信息，包括参数的读取，接下来进行详细说明。

路由跳转

除了通过a标签进行路由跳转之外，还可以使用router-link标签实现跳转功能，它是一个全局的组件，可以直接在template 中使用，无需导入，编译后自动转成一个a标签，但它的功能比a标签更加灵活，直接在当前页中进行路由跳转，不会刷新页面，如下列代码：

<router-link to="/list">学校首页</router-link>

它等价于如下代码：

<a href="/list">学校首页</a>

除使用超级链接标签进行路由跳转外，还可以在代码中，通过路由对象 router进行页面之前的相互跳转，在模板中的如下代码所示：

<div @click="router.push({name:'list'})">学校首页
</div>

其中，router 对象必须先导入，再调用，才能在模板中直接使用，代码如下所示：

import {useRouter} from "vue-router"
export default {name: "App",data(){return{router:useRouter()}}
}

**注意：**从路由模块中导入的必须是useRouter 方法，只有在调用这个方法之后的 router对象中才可以使用push方法，push方法的本质是向当前的路由栈中再添加一个新的路由记录，并根据这个记录进行路由切换，从而实现页面跳转的功能。

带参数跳转

在路由跳转时，还可以携带参数进入目标页，跳转标签和方式不同，携带参数的格式也不一样，如果是一个a标签携带参数跳转，那么它的携带参数的格式如下代码所示：

  <a href="/list?gradeId=1001">一年级</a>

上述代码采用查询字符串方式携带参数，即问号后携带参数，还可以在路径中使用配置项指定的格式携带参数，如下代码所示：

  <a href="/list/1001">一年级</a>

上述代码中，/1001是配置时指定的格式，1001是一个名为gradeId的变量值，这个带参数跳转方式需要在路由配置中设置，代码如下所示：

{path: '/list/:gradeId',name: 'list2',component: () => import('../views/list.vue')}

在上述代码中，path属性设置路径时，可以通过变量gradeId带参数跳转，这样设置后，在目标页中，就可以通过路由对象中的 params.gradeId格式获取到携带的参数。

除使用a标签携带参数跳转外，还可以使用 router-link 和其他标签携带参数跳转，如果是router-link，那么，它的跳转格式如下代码所示：

 <router-link :to="{name: 'list2',params: {gradeId: 1001}}">一年级</router-link>

如果是其他的元素，由于没有to或href属性，只能调用单击事件进行携带参数的跳转，上述代码改成 div标签跳转，则修改后的代码如下所示：

<div @click="router.push({name: 'list2',params: {gradeId: 1001}})">一年级</div>