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

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

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

一、使用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>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</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传参**

另一个页面接收

总结：
query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数

params相当于POST请求，参数不会在地址栏中显示

（学习视频分享：web前端开发、编程基础视频）

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

路由