🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# router-link 补充 在前面的`<router-link>`中, 我们只是使用了一个属性: to, 用于指定跳转的路径.。重在于`跳转/导航` ## 其它属性 >[success] tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个元素, 而不是 `a` 标签 > replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中 > active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前 `router-link` 渲染的a元素设置一个`router-link-active`的 > 类名。后面我们还可以对它修改 * 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类. * 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可. :-: ![](https://img.kancloud.cn/a5/27/a527822699021c47e1cf794597838fd5_413x297.png) ## 修改linkActiveClass 该class具体的名称也可以通过router实例的属性进行修改(名字太长不好用) ``` const router = new VueRouter({ routes, linkActiveClass:'active' }) ``` ![](https://img.kancloud.cn/6f/19/6f1920930a131bbc31ef873e183f1e66_907x450.png) `exact-active-class`类似于`active-class`, 只是在精准匹配下才会出现的`类名`. 后面看到嵌套路由时, 我们再看下这个属性. # 编程式的导航 除了使用`<router-link>`创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法(即JS),通过编写代码来实现。 ``` router.push(location) ``` ![](https://img.kancloud.cn/fc/de/fcdeed1508139c36c74285bdcff27387_716x525.png)