推广

Vue方向:Vue路由跳转时组件的属性

iseeyu3年前 (2024-02-21)推广159

代码

代码

        结果说明:

        1.  router-link 会自动的被渲染为a标签

        2.  router-view为组件显示的位置,会被显示的组件给替换掉

        3.  li标签嵌套a标签

1.2  router-link组件的其他属性

        很显然,我们目前已知的属性有 to 属性,用来跳转路由,那么router-link还有哪些其他的属性呢?

1.2.1  tag属性

        tag属性用于指定router-link组件在渲染时被渲染成什么标签,修改代码如下:

代码

执行结果

        修改结果说明:

        1、在开发中router-link就不用在被li标签所嵌套,减少一层标签的使用

        2、因为router-link在渲染时会被渲染为li标签,因为符合标签嵌套规则,ul中嵌套li

        3、前端路由的跳转可以是任何标签

        4、router-link可以通过tag属性指定渲染为任何标签

1.2.2  replace属性

        replace属性是直接替换当前history记录,因此就不能利用浏览器的前进后退键来切换路由显示,在默认的情况下,每次切换路由都是在像history历史记录中添加路由,这样就可以通过浏览器前进后退切换页面显示,如果不希望用户使用浏览器前进后退,就可以使用replace属性。

代码

        虽然多次切换了路由,但是每一次切换路由都是通过replace替换history历史记录,因此不会生产新的历史记录,也就不会使用前进后退键。

1.2.3  active-class属性

        当<router-link>对应的路由匹配成功以后,会自动给当前路由添加一个 router-link-active 的类名

结果

        当前页面路由匹配成功,页面显示关于我们,同时页面的路由会自动拥有router-link-active的类名,active指的活跃,router-link-active理解为激活的路由。

        因此,可以利用这个路由来做切换路由的高亮显示,通过router-link-active类自定义当前路由的样式

代码

样式的修改

        每次切换路由,当前匹配的路由都会具有 router-link-active,具有这个类名的,也就有了其他路由不同的样式。

        但也可以通过<router-link>组件中 active-class 属性来修改

代码

结果

        除了在router-link组件中通过active-class属性修改外,还可以在路由的配置对象中修改,如果整个项目中所有活跃路由的类名需要修改的话,可以在路由配置中修改

router文件下的index.js

2、编程式导航

        通过<router-link>组件渲染的html标签进行跳转,还可以在方法中进行路由的跳转,在方法中进行的路由跳转称为 编程式导航。

代码

结果

        结果依然是可以正常执行的。

3、  替换history记录

        push方法可以跳转路由,但是正如之前说的,push在每一次跳转路由的时候,都会在history新增历史记录。想要替换history记录,可以使用replace方法。

代码

扫描二维码推送至手机访问。

版权声明:本文由西安泽虎代运营发布,如需转载请注明出处。

转载请注明出处https://www.0291.com.cn/post/57248.html

相关文章

西安企业做百度推广,一个月花三千和花三万到底差在哪?

4|最近跟几个西安的老板聊天,发现一个挺有意思的现象:同样做百度推广,有人一个月花三千块,询盘不断;有人一个月砸三万,水花都没见着。问他们区别在哪,大多数人说不清楚,只知道'钱花了,没效果'。 5| 6|百度推广这东西,说复杂也复杂,说简单也简单。核心就一件事:让你的潜在客户搜某个词的时候,你的信息...

我想当策划,大学应该选什么专业?

我想当策划,大学应该选什么专业?

学,广告,传播,公关,这些专业其实都可以。另外也可以学像汉语言文学,以及一些跟文学相关的一些专业,会对你找工作有帮助。但是,你想从事这个这份职业,除了专业的学习之外,更多的是,你要在上学的时候积极参与一些更营销策划相关的社会实践。比如说你可以做一些兼职,比如说帮别人去写稿,...

服装市场营销策略分析,“定位不慎满盘皆输”

服装市场营销策略分析,“定位不慎满盘皆输”

不同的区域需要不同的策略,而不同的营销策略需要不同的销售思路来配合。因此,在研究女装产品销售思路之前,最好先对于市场与营销策略做一次深入地了解。1.市场区域化(market segmentation):目标营销的第一步,是将整个市场拆分成若干个同性质的小市场。2.目标市场的...

晚间悦读丨你的思维方式,决定你的人生高度!

晚间悦读丨你的思维方式,决定你的人生高度!

越长大,越发现,能够决定你人生高度的,往往是你的认知层次。 你的认知在哪个层级,你的人生就处在什么状态。你认知的高度,决定了你人生的高度。 那如何才能升级方式、提升认知能力呢?可以从这三个方面做出改变。 NO. 1 改变态度 有人...

编写项目营销策划方案六大要点

编写项目营销策划方案六大要点

现在商业发展非常迅速,的需求非常的大,但是要做好营销策划是有一定难度的,我把自己做营销策划的一些体会在这里分享给朋友们。营销策划方案六大要点我们先说项目营销策划方案这个话题。大部分的营销策划人都是在企业里工作,大部分项目之初都是来源于一个想法,创始人、老板或者创始团队的一个...

【商场营销策划】如何进行商场营销策划?

【商场营销策划】如何进行商场营销策划?

商场是策划者们关注的永恒话题,那么究竟该如何作好商场营销策划呢?掌握以下这几点营销策略设计原则,至关重要!1.义利兼顾的原则。商场在获取利润的同时要充分考虑到消费者的合法利益和商场的长远利益。在作商场活动营销策略方案的时候应该将这一点作为首要的原则。对商场有利而对顾客不利的...

现在,非常期待与您的又一次邂逅

我们努力让每一部企业宣传片和抖音短视频成为商业大片