What are the Vue routing jump methods?

Jump method: 1. Use the " " statement; 2. Use the "this.$router.push()" statement; 3. Use the "this.$router.replace()" statement; 4. Use the "this.$router.go(n)" statement.

The operating environment of this tutorial: windows7 system, vue version 2.9.6, DELL G3 computer.

vue Four ways to route jump (with parameters)

1. router-link

1. 不带参数   //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数  // params传参数 (类似post) // 路由配置 path: "/home/:id" 或者 path: "/home:id" // 不配置path ,第一次可请求,刷新页面id会消失 // 配置path,刷新页面id会保留 // html 取参 $route.params.id // script 取参 this.$route.params.id  // query传参数 (类似get,url后面会显示参数) // 路由可不配置 // html 取参 $route.query.id // script 取参 this.$route.query.id

2. this.$router.push() (called in the function)

1. 不带参数 this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'}) 2. query传参 this.$router.push({name:'home',query: {id:'1'}}) this.$router.push({path:'/home',query: {id:'1'}}) // html 取参 $route.query.id // script 取参 this.$route.query.id 3. params传参 this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name // 路由配置 path: "/home/:id" 或者 path: "/home:id" , // 不配置path ,第一次可请求,刷新页面id会消失 // 配置path,刷新页面id会保留 // html 取参 $route.params.id // script 取参 this.$route.params.id 4. query和params区别 query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在 params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

3. this.$router.replace() (same usage as above, push)

4. this.$router.go(n)

this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数

ps: Difference

• this.$router.push
  Jump to the specified url path and add a record to the history stack. Clicking back will return to the previous page

• this.$router.replace
  Jump to the specified url path, but there will be no record in the history stack. Clicking return will jump to the previous page ( It directly replaces the current page)

• ##this.$router.go(n)Jump forward or backward n pages, n can It is a positive or negative integer
  

vue.js Tutorial"

The above is the detailed content of What are the Vue routing jump methods?. For more information, please follow other related articles on the PHP Chinese website!