一级/二级路由 路由切换 声明式/编程式导航跳转 tag指明标签 具名路由 组件封装

最新推荐文章于 2023-09-02 19:44:28 发布
最新推荐文章于 2023-09-02 19:44:28 发布
阅读量435 收藏 2
点赞数 2
分类专栏： vue2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/109080758
版权

v-router
Vue中会使用官方提供的第三方插件vue-router插件来使用单页面，原理就是通过检测地址栏变化后将对应的路由组件进行切换（卸载和安装）
在这里插入图片描述

一级路由

第一步安装

cnpm install vue-router -S 或 yarn add vue-router
在这里插入图片描述
之后
在这里插入图片描述
vue.use（）背后分原理就是调用‘MyPlugin.install(vue)’方法
在这里插入图片描述

在这里插入图片描述
在入口主文件里面引入router实例
在这里插入图片描述
必须是routes
在这里插入图片描述
还需要到App.vue渲染
在这里插入图片描述
这里直接把films.vue粘贴到App.vue中
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
一级路由，
在这里插入图片描述

二级路由

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
先访问films ===》访问nowplaying
然后就会将nowplaying模板粘贴到Films.vue中
index.js中 二级路由配置的另一种方法

在这里插入图片描述

路由切换

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

声明式导航方式

同样<router-link><router-link>这种方式就是通过声明式导航的方式进行的跳转

通过tag指明标签

在这里插入图片描述
在这里插入图片描述

封装成通用组件

在这里插入图片描述
在这里插入图片描述

具名路由（通过name找）

在这里插入图片描述
在这里插入图片描述

编程式导航

在这里插入图片描述
别忘了，index.js里面配置路由，引入

this.$router.push()      (push/replace/go/back/forward等等)

都是编程式导航里面的路由跳转方法

Allen·赵
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
路由声明式导航
gunsmoke的专栏
05-21 161
main.vue <template> <div> <router-link to="/child" tag="li" activeClass="act">child</router-link> <router-link to="/child1" tag="li" activeClass="act">child1</router-link> <router-view>&
vue 路由跳转四种方式 (带参数)
xqhys的博客
08-29 2621
1.router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 ...
Vue路由跳转（二）（路由的模块化封装）
qq_40664253的博客
07-24 1567
在上一篇文章中写了在main.js里操作路由的跳转（https://blog.csdn.net/qq_40664253/article/details/97053388） 考虑到路由多了的话在main.js里不太好看，所以对路由进行模块化封装。 1、新建文件，src/Router/Router.js 2、将跟路由有关的全放到此文件里(路径有变化，改改) 3、在router.js里要进行vue实例化...
VUE简单的一级路由跳转
大小鱼鱼鱼鱼鱼
12-11 428
&lt;script type="text/javascript" src="js/vue.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/vue-router.js" &gt;&lt;/script&gt; &lt;body&gt; &lt;div id
vue-router二级导航切换路由及高亮显示的实现方法
10-16
本篇文章将深入探讨如何在Vue Router中实现二级导航的切换路由以及高亮显示。 首先，我们要创建两个主要的导航页面，比如“发现”和“我的音乐”。在Vue中，我们可以创建两个单独的组件，如`Discover.vue`和`...
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
10-17
主要介绍了Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue+element导航+标签导航+路由跳转+路由转换.zip
05-21
vue+element导航+标签导航+路由跳转+路由转换，有需要可以取，博客有详尽说明，https://blog.csdn.net/Hei_lovely_cat/article/details/104692047
react实现同页面三级跳转路由布局
10-16
主要为大家详细介绍了react实现同页面三级跳转路由布局，一个路由小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-路由精讲 二级路由和三级路由的作用
12-28
1、我们继续上一个案例 vue — 路由精讲制作导航 — 从无到有 ，在 about文件夹下 创建一些文件夹。如下： 2、编写about.vue代码。当我们点击导航中 “关于我们” ，就会显示该部分内容。代码中写了四个可供点击后...
常见路由跳转的几种方式
最新发布
weixin_42479421的博客
09-02 1859
路由跳转的方法： to='' 、push等方法
编程式路由导航和withRouter
weixin_43613849的博客
11-02 194
如果想使用按钮实现路由跳转，有两种形式，可回退和不可回退两种： 由于history被放在props中，可以直接通过this.props.history的push和replace改变 可回退：this.props.history.replace(`/home/message/detail`) 不可回退：this.props.history.push(`/home/message/detail`) 如果是想携带参数，有三种方式： ①params ②search ③state ...
路由之间的跳转方式有哪些声明式_详解vue 路由跳转四种方式 (带参数)
xwj822的博客
04-20 237
1.  router-link 不带参数 //name,path都行, 建议用name // 注意：router-link中链接如果是’/‘开始就是从根路由开始，如果开始不带’/’，则从当前路由开始。 2.带参数 // params传参数 (类似post) // 路由配置 path: “/home/:id” 或者 path: “/home:id” // 不配置path ,第一次可请求,刷新页面id会消失 // 配置path,刷新页面id会保留 // html 取参 $route.params.
【vue+ElementUI】使用Tag标签实现动态导航栏-类似文件导航管理
wuchus的博客
07-26 3767
使用ElementUI的tag标签实现一个动态的导航栏。
vue+element路由标签使用tag动态显示隐藏以及跳转实现(使用vuex)
Eleuuuuy的博客
01-27 2419
效果图： 点击tab可以跳转到导航对应页面。 代码： <store> state:{ currentMenu:null, menu:[], tabsList:[ { path:'/', name:'首页', icon:'home' } ] }, mutations:{ //选择标签 selectMenu(state,val){ if(val.path === '/'){ this.currentMenu = null; } else { s
路由跳转的方式和传参——方式之声明式导航、编程式导航 & 传参之params和query
weixin_44867717的博客
07-04 685
vue知识
Vue声明式路由导航和编程式路由导航的优缺点及实现方法
什么都干的派森
05-28 6006
文章目录前言路由实现1.目标2.前置条件3.声明式路由导航实现<1>写路由组件<2>写路由文件<3>实现路由<4>测试4.编程式路由导航实现 前言 声明式路由导航 直接写在html中，结构简单使用方便，但是只能放在<router-link>标签中使用，<router-link>标签会将路由转成<a>标签，通过点击跳转路由，因此局限性也非常大 编程式路由导航 需要写在js中，结构也不算复杂，优势在于非常灵活，不受固定
路由之间的跳转方式有哪些声明式_vue路由跳转的方式（一）
weixin_39732991的博客
12-22 791
一、明文传参(参数在query中，json格式传递)----常用方法一：html跳转编辑详情方法二：js跳转this.$router.push({name:'Details',query:{id:scope.row.id,title:scope.row.title}})接收参数 this.$route.query.xxxlet id = this.$route.query.id;let title...
路由导航的跳转传参以及路由的基本知识
m0_61469746的博客
12-28 392
router 路由导航 声明式导航 <router-link></router-link>在html中作为标签使用 编程式导航 this.$router.push()在Js中作为方法使用 路由传参的方式： query：传递的参数会出现在路径中，在接受的页面通过$route.query.值 来接收 因为参数是在路径中的，所以页面刷新数据不会丢失 工作中常用 params:数据刷新会丢失，只能通过name进行跳转。因为在实际工作中经常会用到分享功能，而分享过后页面刷新后的对象不会保...
二级路由导航如何点击跳转到一级路由界面
07-28
要实现从二级路由点击跳转到一级路由界面，你可以使用以下方法： ...无论你选择哪种方法，都可以在二级路由的组件中触发相应的导航行为，将用户导航到一级路由界面。记得将`/一级路由路径`替换为你实际的一级路由路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值