Vue2 VueRouter 路由导航

Question

路由导航

声明式	编程式	说明
<router-link :to="">	等同 router.push()	导航跳转页面（会向 history 栈添加一个新的记录)
<router-link :to="" replace>	等同 router.replace()	替换当前页面（自动替换掉当前的 history 记录)
	router.go(n)	正在前进或者后退

<router-link :to="" /> : 单击导航，可以通过配置 tag 属性生成其他标签。另外， 当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名

比 <a> 标签的优势：

• 无论是 HTML5 History 模式还是 Hash 模式，它的表现行为一致，所以若要切换路由模式，或者在 IE9 中降级使用 Hash 模式，则无须作任何变动
• 在 HTML5 History 模式下，router-link 会 守卫单击事件 ，让浏览器不再重新加载页面
• 在 HTML5 History 模式下使用 base 选项 后，所有的 to 属性都不需要写（基路径) 了

方法

1. this.$router.replace(location,onComplete?,onAbort?) ： 类似 window.history.replaceState
2. this.$router.go(n) ：类似 window.history.go(n)
3. this.$router.push(location，onComplete?，onAbort?) ：类似 window.history.pushState
   • onComplete 回调（可选)：在 导航成功完成 (在所有的异步钩子被解析之后) 时调用
   • onAbort 回调（可选)： 终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候调用
   • location 参数：

     // 字符串
     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 会被忽略，但是 query 不会被忽略 。

   解决方法 是提供路由的 name 或手写完整的带有参数的 path，该规则也适用于 router-link 组件的 to 属性：

   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