vue-router总结

Posted 2020-10-03

一丶起步

1.使用router-link标签进行路由跳转

<router-link to="/foo">Go to Foo</router-link>

<!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view>

2.当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active

二丶动态路由匹配

 

 

 

 

 

 

$route.matched

 

• 类型: Array<RouteRecord>

 

一个数组，包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。

 

 

$route.name

 

当前路由的名称，如果有的话。（查看 命名路由）

 

 

$route.hash

 

• 类型: string

  当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

 

 

$route.query

 

• 类型: Object

  一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

 

 

$route.params

 

• 类型: Object

 

一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。

 

$route.path

 

• 类型: string

  字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。

 

 

 

三丶嵌套路由

 

四丶编程式导航

1.想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

 

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push(‘home‘)

// 对象
router.push({ path: ‘home‘ })

// 命名的路由
router.push({ name: ‘user‘, params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: ‘register‘, query: { plan: ‘private‘ }})

2.router.replace(location)

 

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

3.router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

 

九丶导航钩子

1.router.beforeEach

 

组件内的钩子

 

最后，你可以在路由组件内直接定义以下路由导航钩子：

 

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave