vue router（编程式导航 vs 声明式导航VS window.history（个人理解））

编程式导航 VS 声明式导航 VS window.history（个人理解）

• push(’/path’):往浏览器历史记录添加一条历史记录。可通过浏览器后退按钮，返回到跳转前的页面;
• replace(’/path’):它不会向 history 添加新记录，替换掉当前的 history 记录;
• go(n):n:正数代表前进。n:负数代表后退。n:代表转到浏览器历史记录history栈前进或后退n步;
• back(): 等同于点击浏览器的回退按钮;
• forward(): 等同于history.back();

编程式导航	声明式导航	history
this.$router.push(’/user’)	<router-link :to={path:’/user’} />	window.history.pushState(’/user’)
this.$router.replace(’/user’)	<router-link :to={path:’/user’ replace />	window.history.replaceState(’/user’)
this.$router.go(n)	无	window.history.go(n)
无	无	window.history.back()
无	无	window.history.forward()

参数类型(适用于编程式导航和声明式导航)—以编程式导航举例

• this.$router.push(’/user’)
• this.$router.push({ path: ‘/user’ })
• this.$router.push({ path: ‘/user/123’ })
• this.$router.push({ path: ‘/user’, query: { userId: ‘123’ } })
• this.$router.push({ name: ‘user’, params: { userId: ‘123’ } })

注意事项

• path和params不能同时使用，会忽略params参数。错误用法：this.$router.push({path:’/user’,params:{userId:‘123’}})
• 编程式导航主要是使用this.$router的方式通过编程代码进行路由跳转;
• 声明式导航主要是使用和进行路由跳转;