1. Routing jump
Routing jumps in Vue are mainly divided into two ways:
-
Declarative Routing Navigation (
<router-link>
) -
Programmatic route navigation (js way)
2. Declarative Routing Navigation
<router-link>
1. Jump without parameters
<router-link :to="{name: 'home' }" > </router-link>
<router-link :to="{path: '/home'}" > </router-link>
// name, path都行, 建议用name
<router-link :to="{name: 'home'}" tag='li'> </router-link>
Notice:
<router-link>
If the middle link/
starts, it starts from the root route. If it does not start/
, it starts from the current route.<router-link>
It will be parsed intoa
tags by default, and you cantag
specify it to be parsed into other tags through attributes
2. Jump with parameters
params
way parameter
<router-link :to="{name: 'home', params: {id:1}}">
// params 传参数 (类似post)
// 路由配置path: "/home/:id" 或者 path: "/home:id"
// 不配置path: 第一次可请求, 刷新页面id会消失
// 配置path: 刷新页面id会保留
// html取参: $route.params.id
// script取参: this.$route.params.id
query
Way parameter:
<router-link :to="{name: 'home', query: {id:1}}">
// query传参数 (类似get, url后面会显示参数)
// 路由可不配置
// html取参: $route.query.id
// script取参: this.$route.query.id
3. Programmatic Routing Navigation
1. this.$router.push()
Click the routing link to jump to a new page and return to the current routing interface
1. Jump without parameters
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. Jump with parameters
Pass parameters in query mode:
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
Pass parameters in params mode:
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
The difference between query and params
query is similar to get, after the jump, the page url will be spliced with parameters, similar to ?id=1, non-important ones can be passed in this way, passwords and the like should berefreshed with params and the page id is still there;
params is similar to post, after the jump, the page url is behind The parameters will not be spliced, but the id will disappear when the page is refreshed.
2. this.$router.replace()
replaces the current route with a new route, and cannot return to the current route interface
The specific usage is the same as above this.$router.push()
3. this.$router.back()
requests (returns) the previous record route
4. this.$router.go(n)
jump forward or backward n pages, n can be positive or negative integer
// 请求(返回)上一个记录路由
this.$router.go(-1)
// 请求下一个记录路由
this.$router.go(1)
The above four methods distinguish
this.$router.push:Jump to the specified url path, and add a record to the history stack, click back to return to the previous page ==>> queue mode (first in, first out)
this.$router.replace:
Jump to the specified url path, but there will be no records in the history stack, click back to jump to the previous page (that is, directly replace the current page) ==>> stack method (first in, last out)
this.$router.back:
Request (return) previous record route
this.$router.go:
Jump forward or backward n pages, n can be positive or negative integer