vue-cli中路由的配置

6

vue-cli中路由的配置 1234export default new Router({   // 更改路由模式,默认是hash   mod…

vue-cli中路由的配置

1
2
3
4
export default new Router({
  // 更改路由模式,默认是hash
  mode:"history",
})

vue-router中的跳转(两者相同作用,a的作用单一)

1
2
<a href="/rank">进入rank</a>  
 <router-link to="/rank">路由导向</router-link>

router-link的各项配置

动态绑定to,index为data中的数据
1
<router-link :to="index">rank向导</router-link>
使用对象的写法
1
    <router-link :to="{path:'/rank'}">rank向导</router-link>

冒号要加,斜杠要加

将route-link标签生成别的标签,例如div标签,转换之后依然是可以切换的
1
    <router-link :to="{path:'/rank'}" tag="span">rank向导</router-link>
给当前点击的链接设置高亮显示,动态添加class
1
2
3
4
export default new Router({

  // 点击的每一个都是这个颜色
  linkActiveClass:'is-active',
给当前点击的导航单独的颜色,可以让每一个导航都不一样(权重比前一个高)
1
2
<!-- 单独给当前点击的class设置颜色 -->
    <router-link :to="{path:'/rank'}" active-class="activeClass">rank向导</router-link>
鼠标移入的时候路由切换,背景色改变
1
    <router-link to="/search" event="mouseover">search</router-link>

上面配置的是,鼠标移入就改变,我们还可以使用 点击等时间来进行改变。

作者: huanggr

为您推荐

7

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

联系我们

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部