1、通过标签进行路由跳转
1.1 标签跳转路由的方式
Vue Router提供了两个内置的组件帮助我们进行路由的跳转
使用方式：
代码
代码
结果说明：
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方法。
网友评论