vue2.0路由(跳转和传参)经典介绍

声明式
<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 }})

 

posted @ 2017-10-05 00:04  蓝色帅-橙子哥  阅读(548)  评论(0编辑  收藏  举报