路由跳转方式
路由跳转方式
路由的跳转方式有两种形式。
一、声明式导航
router-link标签 ,可以把router-link理解为一个a标签，它 也可以加class修饰
- 属性：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class
- to（必选参数）：类型string/location。
Home
User
Register
- replace：类型boolean，默认值 false。会调用 router.replace() ，而不是 router.push()，于是导航后不会留下 history 记录 。
- append：类型boolean，默认值 false。 设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b。
- tag：类型string，默认值 “a” 。想要
- active-class：类型string，默认值 “router-link-active” 。选中样式，可以配置文件中统一修改 “linkActiveClass:'active'”。
首页
-
exact：类型: boolean，默认值: false。“是否激活” 默认类名的依据是全包含匹配。
-
exact-active-class：类型string，默认值 “exact-active-class” 。当链接被精确匹配时候的选中样式，可以配置文件中统一修改 “linkExactActiveClass:'exact-active”。
首页
首页
二、编程式导航
编程式导航 push|replace：声明式导航能做的编程式都能做，编程式导航除了进行路由跳转，而且还可以处理一些业务
- push()：跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由 变成 /user/123
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }})
- go()：页面路由跳转 前进或者后退
this.$router.go(-1) // 后退
- replace()：替换当前的页面，不会向 history 栈添加一个新的记录。一般使用replace来做404页面。
this.$router.replace(’/’)
//配置路由时path有时候会加 ‘/’ 有时候不加,以’/'开头的会被当作根路径，就不会一直嵌套之前的路径。