vue2.0路由经典介绍

Posted 2020-10-09 鱼樱、、

声明式
<router-link :to="...">
编程式
router.push(...)

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

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

router.push({ name: ‘user‘, params: { userId: 123 }})     // 命名的路由
router.push({ path: ‘register‘, query: { plan: ‘private‘ }})  // 带查询参数，变成 /register?plan=private

 

$route.path 当前路由对象的路径，如‘/view/a‘ $rotue.params 关于动态片段（如/user/:username)的键值对信息,如{username: ‘paolino‘}

$route.query 请求参数，如/foo?user=1获取到query.user = 1 $route.router 所属路由器以及所属组件信息

$route.matched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

$route.name 当前路径名字

router.replace(location)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
声明式
<router-link :to="..." replace>
编程式
router.replace(...)

router.go(n)
router.go(1) // 在浏览器记录中前进一步，等同于 history.forward()
router.go(-1) // 后退一步记录，等同于 history.back()
这两种方式都会把路由导航到 /user/123 路径。
<router-link :to="{ name: ‘user‘, params: { userId: 123 }}">User</router-link>
router.push({ name: ‘user‘, params: { userId: 123 }})