Vue中实现路由跳转的三种方式详细分解

简介: Vue中实现路由跳转的三种方式详细分解

一、使用vue-router

vue-router本质是一个第三方的包 用的时候需要下载

详细步骤 (7步法 ):

1.下载vue-router模块到当前工程

npm i 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值为准

二、声明式-router-link 【实现跳转最简单的方法】

1.可用组件router-link来替代a标签

  • router-link 是vue-router提供了一个全局组件
  • router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
  • router-link提供了声明式导航高亮的功能(自带类名)

代码如下:

<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中定义高亮样式 点击时就会高亮

router-link好处 : 自带激活时的类名, 可以做高亮


2.在跳转路由时, 可以给路由对应的组件内传值

在router-link上的to属性传值, 语法格式如下 :

(方式一)

to=/path?参数名=值

例:to="/part?name=张三"


对应页面组件接收传递过来的值

$route.query.参数名

接收数据:$route.query.name

(方式二)

to=“/path/值” (需在路由规则里配置/path/:参数名)

例:to="/part/李四"

配置:path:"/part/:username"

对应页面组件接收传递过来的值 (注意动态参数需要用params接收)

$route.params.参数名

接收数据:$route.params.username

三、编程式-用JS代码来进行跳转

用JS代码来进行跳转

语法: path或者name任选一个

1、router router 和  route的区别


$router : 是路由操作对象,只写对象

$route : 路由信息对象,只读对象

$route : 路由信息对象,只读对象

$ router操作路由跳转

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

$route读取 路由参数接收

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

2、路由跳转方式name 、 path 和传参方式params 、query的区别(重要)

path 和 name路由跳转方式,都可以用query传参

  • 使用path方式跳转路由 path会忽略params 所以path不能和params一起使用
  • 推荐使用name和query方式实现路由跳转

  • params传参,push里面只能是 name:‘xxx’,不能是path:‘/xxx’,因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

通过params传参

==注意:==这里使用name路由跳转方式路径不需要加 / 因为它只是个名字

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

另一个页面接收:

这里使用params传参就需要写params接收

this.$route.params.id

通过query传参

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

另一个页面接收

this.$route.query.age

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

uery传参**

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

另一个页面接收

this.$route.query.age

总结:

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

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

目录
打赏
0
0
0
0
1
分享
相关文章
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
61 8
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
151 1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等