关于vue-router总结

一丶起步

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