vue怎么进行路由跳转？本篇文章给大家详细整理vue中实现路由跳转的三种方式，希望对大家有所帮助！
一、使用vue-router
步骤 （7步法 ）：
1、下载vue-router模块到当前工程
yarn add vue-router
2、在main.js中引入VueRouter函数
立即学习“前端免费学习笔记（深入）”；
// 引入路由import VueRouter from "vue-router";
3、添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件
// 注册全局Vue.use(VueRouter)
4、创建路由规则数组 – 路径和组件名对应关系
const routes = [{ path: "/", redirect: "find" //默认显示推荐组件(路由的重定向) }, { path: "/find", name: "Find", component: Find, //二级路由 children: [{ path: "/", redirect: "recom" //默认显示推荐组件 }, { path: "ranking", //注意二级路由的路径千万不要加/ component: Ranking }, { path: "songlist", component: SongList }, ] }, { path: "/my", name: "My", component: My }, { path: "/part", name: "Part", component: Part }, { path: "*", component: NotFound //定义找不到已有组件时显示404 }, ]5、用规则生成路由对象
// 创建路由对象并且传入规则const router = new VueRouter({ routes, mode: "history" //路由模式(默认为hash模式)})6、把路由对象注入到new Vue实例中
new Vue({ router, //导入路由对象 render: h => h(App),}).$mount('#app')7、用router-view作为挂载点, 切换不同的路由页面
二、声明式-router-link 【实现跳转最简单的方法】
1.可用组件router-link来替代a标签
代码如下：
<template> <p> <p class="footer_wrap"> <router-link to="/find">发现音乐</router-link> <router-link to="/my">我的音乐</router-link> <router-link to="/part">朋友</router-link> </p> <p class="top"> <router-view></router-view> </p> </p></template>//在控制台元素检查时会发现激活的类名 在样式style中定义高亮样式 点击时就会高亮
2.在跳转路由时, 可以给路由对应的组件内传值
在router-link上的to属性传值, 语法格式如下 :
(方式一)
对应页面组件接收传递过来的值
(方式二)
对应页面组件接收传递过来的值 （注意动态参数需要用params接收）
三、编程式-用JS代码来进行跳转
用JS代码来进行跳转
语法: path或者name任选一个
1、$ router 和 $ route的区别
$ router操作路由跳转
this.$router.push({ name:‘hello’, query:{ name:‘word’, age:‘11’ } })$route读取 路由参数接收
var name = this.$route.query.name;
2、路由跳转方式name 、 path 和传参方式params 、query的区别（重要）
通过params传参
另一个页面接收:
通过query传参
另一个页面接收
query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数
uery传参**
另一个页面接收
this.$route.query.age总结：
query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数params相当于POST请求，参数不会在地址栏中显示
（学习视频分享：web前端开发、编程基础视频）
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）