How does vue perform route jump? This article will give you a detailed summary of the three ways to implement routing jumps in vue. I hope it will be helpful to you!
##vue-router##StepsEssence is a third party The package needs to be downloaded when using it. [Learning video sharing: vue video tutorial, web front-end video]
(7 steps):
1. Download thevue-router module to the current project
1 |
|
1 2 |
|
1 2 |
|
Create an array of routing rules (page components that need to be prepared for switching) and introduce the prepared page components into main.js
5. Use rules to generate routing objects
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const
routes = [{
path:
"/"
,
redirect:
"find"
//默认显示推荐组件(路由的重定向)
},
{
path:
"/find"
,
name:
"Find"
,
component: Find,
//二级路由
children: [{
path:
"/"
,
redirect:
"recom"
//默认显示推荐组件
},
{
path:
"ranking"
,
//注意二级路由的路径千万不要加/
component: Ranking
},
{
path:
"songlist"
,
component: SongList
},
]
},
{
path:
"/my"
,
name:
"My"
,
component: My
},
{
path:
"/part"
,
name:
"Part"
,
component: Part
},
{
path:
"*"
,
component: NotFound
//定义找不到已有组件时显示404
},
]
Copy after login
1 2 3 4 5 |
|
1 2 3 4 |
|
router-viewAs a mount point, switch different routing pages
router-viewWhere routing content is implemented, when introducing components, write the places that need to be introduced. It should be noted that when using vue-router to control routing, router-view must be used as a container. (You can first introduce the root component App.vue for self-test)
Note:Everything must be based on the hash value on the url
router-linkis vue-router provides a global component
The code is as follows:- #)
router-link will essentially render into a link to attribute equivalent To provide the href attribute (
to does not require- router-link provides the function of declarative navigation highlighting (with its own class name)
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
2. When jumping to a route, you can pass the value to the component corresponding to the route.
to=/path?Parameter name=value
Example:to="/part?name=Xiao Ming"
The corresponding page component receives the passed value
$route.query.Parameter name
Receives data: $route.query.name( Method 2)
to="/path/value" (/path/: parameter name needs to be configured in the routing rule)
Example:to="/part /小王"
Configuration:
path:"/part/:username"
The corresponding page component receives the passed value (note the dynamic Parameters need to be received using params)
$route.params.Parameter name
Receive data: $route.params.username3. Programming - Use JS code to jump
The difference between
1,
$router: It is a routing operation object, a write-only object$route: routing information object, read-only object
$ router operation route jump
1 |
|
1 |
|
Using path method to jump route path will ignore params, so path cannot be used together with params
It is recommended to use name and query methods to implement route jump
params pass parameters, push can only be name:'xxx', not path:' /xxx', because params can only use name to introduce routes. If path is written here, the parameter receiving page will be undefined! ! !
Passing parameters through params
==Note: ==You don’t need to add
/# when using the name route jump method here. ## Because it is just a nameAnother page receives:
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">this.$router.push({ name:"Home", params:{ id:this.id } })</pre><div class="contentsignin">Copy after login</div></div>
You need to use params to pass parameters here Write params to receive
1
this.
$route
.params.id
Copy after login
通过query传参
1
2
3
4
5
6
this.
$router
.push({
path:
"/Search"
,
query:{
//query是个配置项
age:20
}
})
Copy after loginCopy after login
另一个页面接收
1
this.
$route
.query.age
Copy after loginCopy after login
query相当于GET请求,页面跳转的时候,可以在地址栏看到请求参数
uery传参**
1
2
3
4
5
6
this.
$router
.push({
path:
"/Search"
,
query:{
//query是个配置项
age:20
}
})
Copy after loginCopy after login
另一个页面接收
1
this.
$route
.query.age
Copy after loginCopy after login
总结:
query相当于GET请求,页面跳转的时候,可以在地址栏看到请求参数
params相当于POST请求,参数不会在地址栏中显示
The above is the detailed content of (Super detailed) How to perform route jump in Vue? Three ways to share. For more information, please follow other related articles on the PHP Chinese website!