（超详细）vue怎么进行路由跳转？三种方式分享

vue怎么进行路由跳转？本篇文章给大家详细整理vue中实现路由跳转的三种方式，希望对大家有所帮助！

一、使用vue-router

vue-router 本质是一个第三方的包 用的时候需要下载。【学习视频分享：vue视频教程、web前端视频】

步骤 （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、创建路由规则数组 – 路径和组件名对应关系

创建路由规则数组（需要准备切换的页面组件）把准备好的页面组件引入到main.js中

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作为挂载点, 切换不同的路由页面

当url的hash值路径切换，显示规则里对应的组件

router-view 实现路由内容的地方，引入组件时写到需要引入的地方 需要注意的是，使用vue-router控制路由则必须router-view作为容器。（可以先引入根组件App.vue中进行自测）

注意:一切都要以url上hash值为准

vue、vue）

  
    
      发现音乐      我的音乐      朋友    
    
          
  
//在控制台元素检查时会发现激活的类名 在样式style中定义高亮样式 点击时就会高亮

登录后复制

this.$router.push({ name:‘hello’, query:{ name:‘word’, age:‘11’ } })

登录后复制

var name = this.$route.query.name;

登录后复制

this.$router.push({    name:"Home",    params:{        id:this.id    }})

登录后复制

this.$route.params.id

登录后复制

this.$router.push({    path:"/Search",    query:{ //query是个配置项        age:20    }})

登录后复制登录后复制

this.$route.query.age

登录后复制登录后复制

this.$router.push({    path:"/Search",    query:{ //query是个配置项        age:20    }})

登录后复制登录后复制

this.$route.query.age

登录后复制登录后复制

以上就是（超详细）vue怎么进行路由跳转？三种方式分享的详细内容，更多请关注【创想鸟】其它相关文章！