this.$router.push、replace、go的區別
阿新 • • 發佈:2020-11-30
1.this.$router.push()
描述:跳轉到不同的url,但這個方法會向history棧新增一個記錄,點選後退會返回到上一個頁面。
用法:
this.$router.push('/index') this.$router.push({path:'/index'}) this.$router.push({path:'/index',query:{name: '123'}}) this.$router.push({name:'index',params:{name:'123'}}) // 字串 router.push('home') // 物件 this.$router.push({path: '/login?url=' + this.$route.path}); // 帶查詢引數,變成/backend/order?selected=2 this.$router.push({path: '/backend/order', query: {selected: "2"}}); // 命名的路由 router.push({ name: 'user', params: { userId: 123 }})
2.this.$router.replace()
描述:同樣是跳轉到指定的url,但是這個方法不會向history裡面新增新的記錄,點選返回,會跳轉到上上一個頁面。上一個記錄是不存在的。
3.this.$router.go(n)
相對於當前頁面向前或向後跳轉多少個頁面,類似window.history.go(n)
。n可為正數可為負數。正數返回上一個頁面
//宣告式: <router-link :to="..." replace></router-link> // 程式設計式: router.replace(...) //push方法也可以傳replace this.$router.push({path: '/home', replace: true})