学习前端_vue组件_路由_编程式导航

 

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 javascript 方式 调用 router 的实例方法，通过编写代码来实现。通过这种方式我们能够更加方便的和灵活的跳转到任意导航。

两种方式：router.push(...)  这种方式等同于 <router-link :to="...">  当执行router.push 时会向 history 栈添加一个新的记录，所                           以当我们点击后退时，会返回之前的URL

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

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

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

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

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

当你使用path 时， params 会被忽略， 这时你需要手动将 path 补充完整 或者使用其他方式，如下例：当使用name 时可以加params 设置参数，如果时path 必须将其路径补充完整。path+params中，params是不生效的

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

router.go(n)中n为正表示前进 n步，n为负表示后退n步

// 后退一步记录，等同于 history.back()
router.go(-1)