二十五、进阶之路由声明式导航（router-link）

最新推荐文章于 2024-04-22 12:12:33 发布
最新推荐文章于 2024-04-22 12:12:33 发布
阅读量121 收藏
点赞数
分类专栏： 框架Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunnnnh/article/details/114878442
版权

目录

（1）首先在App.vue中引入组件tabbar，用以显示导航栏

（2）在components文件夹下，创建组件文件Tabbar.vue

（3）效果图

（4）问题

在二十四的基础上，实现下面页面（与此节不同，二十四节中，每次都需要在地址栏修改）

通过点击按钮（film、cinema 或 center），来切换到相应的页面级组件（此时地址栏发生变化）

并且点击时有高亮效果，刚进入该页面时，默认选中的按钮，也是高亮效果

（1）首先在App.vue中引入组件tabbar，用以显示导航栏

（2）在components文件夹下，创建组件文件Tabbar.vue

主要用到组件router-link

（3）效果图

初始情况（film为高亮灰色，显示film组件）

点击center（center为高亮灰色，显示center组件，导航栏发生变化）

（4）问题

当直接访问http://localhost:8080时，不能跳转到默认的组件，只显示导航栏

解决：使用重定向解决

在router/index.js中（即默认访问/film）

 

 

 

C.&H.
关注
专栏目录
vue路由从入门到进阶 --- 声明式导航详细教程
共同学习，共同成长
05-30 1579
本文讲解vue路由的【声明式导航（router-link）】【导航高亮】【精确匹配&模糊匹配】【自定义高亮类名】【声明式导航传参 ( 查询参数传参 & 动态路由传参 )】等内容，并结合具体案例让小伙伴们深入理解 ，彻底掌握！
前端面试react题目5|react-router,编程式导航，路由传参，嵌套路由，404路由配置，useState
最新发布
VAN
04-22 212
需求描述：自定义一个hook函数，实现获取滚动距离YsetY(h)})return [y]自定义hook函数，可以自动同步到本地LocalStoragemessage可以通过自定义传入默认初始值每次修改message数据的时候 都会自动往本地同步一份// 每次只要message变化 就会自动同步到本地ls。
路由跳转----声明式导航、编程式导航
fgujkkoiuyt_的博客
09-06 636
【代码】路由跳转----声明式导航、编程式导航。
vue-router 的 嵌套路由 router-link 声明式导航
qq_44917015的博客
05-07 296
我的理解： 组件的切换可以使用路由来进行实现 类似于一种tab页的进行切换 使用router-link 进行跳转切换组件 从而进行切换页面 以/开头会被当成根路径进行解析 当前的导航方式 声明式导航 路由的配置： 子路由是不需要加/的； { path: "/index", name: "chart3", component: index, // 路由重定向 redirect: "/index/my" , // 子路由是不需要加/的 childr
vue路由声明式导航：router-link详解（4）
rbgg_mp的博客
11-17 609
声明式导航 原生的方法:window.onhashchange 监听路径的切换 vue提供的组件:router-link 官方解释: 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 a 标签， 可以通过配置 tag 属性生成别的标签.。 另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名 router-link小栗子 1.在components下面新建一个Tabbar组件 <template> &l
声明式导航编程式导航
qq_42919799的博客
09-18 153
跳转路由的2种基本方式 声明式导航: <router-link to=""> 编程式导航: this.$router.push()/replace() 编程式导航比声明式导航更加的灵活（内部可以加入自己的逻辑），在某些情况下效率会更好 声明式导航写法 编程式导航写法 ...
声明式导航&&编程式导航
qq_72760247的博客
10-24 2460
声明式导航&&编程式导航
在 Vue3中，封装一个 router-links ,支持内外链接都能跳转！
2401_84091110的博客
04-22 1118
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！[外链图片转存中…(img-6CPBAXG2-1713759077122)]前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！[外链图片转存中…(img-b1Zstxs7-1713759077123)][外链图片转存中…(img-sRkg1PbV-1713759077123)]
vue-router菜鸟进阶！（动态路由匹配VS编程式导航）
AprilCC的博客
11-09 4557
开篇废话：每天早上都要被自己迷倒～嘻嘻。最近状态超级好编程的状态也好了很多很多～ 前面我们已经看了vue.js基础，又看了webpack的知识还有简单的vue-router小实例。其实已经可以自己勉强写一些简单页面了。但是我偏不hhhhhh，虽然说实践出真知，但是我这种学院派还是偏爱看这官方文档跟着上面的实例走。野路子虽好，可不要走偏噢 ～ (;｀O´)o动态路由匹配我们经常需要把某种模式匹配到
vue-router菜鸟进阶！(嵌套路由VS命名路由)
AprilCC的博客
11-09 2240
嵌套路由一个被渲染组件可以包含自己的嵌套< router-view >。要在嵌套的出口中渲染组件，需要在VueRouter的参数中使用children配置：<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></s
前端进阶Vue框架-----声明式导航
m0_61656944的博客
02-26 476
vue_声明式导航&编程式导航
ZH
08-20 2002
导航 声明式导航和编程时导航中的路由跳转的写法是一致的 声明式导航 声明式导航就是router-link <router-link to="path"></router-link> <router-link :to="'path?id=' + id"></router-link> <router-link :to="{path: 'path...
Router-Link详解
热门推荐
Carol的小星球
07-08 5万+
<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名 组件的属性有： to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class 1、to（必选参数）：类型string/location 表示目标路由的链接，该
声明式导航和编程式导航
qq_32755875的博客
08-05 1689
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&lt
Vue中router-link常用属性-使用案例
JackieDYH的博客
01-04 926
在vue1.0版本的超链接标签还是原来的a标签，链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签，但最终在页面还是会被渲染成a标签的。
简单的前端配置路由步骤以及编程式导航和声明式导航的理解
LRQQHM的博客
11-28 272
首先安装vue-router 1.添加路由链接 2.配置路由规则 3.路由占位 4.将路由挂载到vue实例中 编程式导航 通过js中的api 例如location.href 编程式导航是routerthis.router this.routerthis.router.push(‘hash地址’) this.router.go(n)声明式导航例如通过a标签或者通过<router−linkto="/url">this.router.go(n) 声明式导航 例如通过 a标签 或者通过<rou
router-link 知识补充：
lxyxfx的博客
09-02 108
router-link 知识补充： home页面 tag 可以把标签变成button to="/home" 应该有”/“ replace 就让返回箭头没有效果了 编程式导航 this.router.push("/home")可以返回this.router.push("/home") 可以返回 this.router.push("/home")可以返回this.router.replace("/home") 不可以返回 router-link 中携带参数 分析 （1 ） route
vue声明式导航和编程式导航
weixin_47013351的博客
04-17 1040
声明式导航: 声明式导航是写在template标签里，通过<router-link></router-link>标签来触发: <router-link to="/about">跳转</router-link> 编程式导航： 编程式导航是在js代码进行跳转的操作。使用this.$router.push(xxx)来触发跳转： this.$router.push('path') //传递参数 this.$router.push({ pa
router-link 与router-view的 slot
weixin_51614564的博客
07-10 1185
在前面已经写了关于router 的好多文章，也写了router 的几个内置全局组件router-link 和router-view，其实这也主要是因为router 在内部做了好多事情，也就是之前创建一个router 对象，然后通过app.use(router) 进行了使用，而这样去使用的时候其实会执行 router.install 这个函数，这个函数会把app传过来，然后内部注册了router-link 和router-view这么一个全局组件 2.router-link v-slot 的使用props
router-view的原理
08-19
当路由变化时，会触发Vue的响应式机制，从而触发router-view组件的重新渲染。这样就实现了动态渲染对应组件的功能。 总结起来，router-view的原理是通过全局注册组件并利用Vue的响应式机制来实现动态渲染对应组件的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值