Three ways to realize routing jump in vue
Table of contents
Three ways to realize routing jump in vue
1. Download the vue-router module to the current project
2. Introduce the VueRouter function in main.js
3. Add to Vue.use() – register global RouterLink and RouterView components
5. Generate routing objects with rules
6. Inject the routing object into the new Vue instance
7. Use router-view as the mount point to switch between different routing pages
2. Declarative-router-link [The easiest way to realize the jump]
1. The component router-link can be used to replace the a tag
2. When jumping to the route, you can pass the value to the component corresponding to the route
3. Programmatic - use JS code to jump
1. The difference between $router and $route
1. Use vue-router
Vue-router is essentially a third-party package that needs to be downloaded when it is used
Detailed steps (7 steps):
1. Download vue-routerthe module to the current project
npm i vue-router
2. Introduce the VueRouter function in main.js
// 引入路由
import VueRouter from "vue-router";
3. Add to Vue.use() – register global RouterLink and RouterView components
// 注册全局
Vue.use(VueRouter)
4. Create an array of routing rules – the corresponding relationship between paths and component names
Create an array of routing rules (page components that need to be switched) and introduce the prepared page components into main.js
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
},
]
5. Generate routing objects with rules
// 创建路由对象并且传入规则
const router = new VueRouter({
routes,
mode: "history" //路由模式(默认为hash模式)
})
6. Inject the routing object into the new Vue instance
new Vue({
router, //导入路由对象
render: h => h(App),
}).$mount('#app')
7. Use router-viewas a mount point to switch between different routing pages
When the hash value path of the url is switched, the corresponding component in the rule is displayed
router-viewWhere the routing content is implemented, when importing components, 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 subject to the hash value on the url
2. Declarative-router-link [The easiest way to realize the jump]
1. The component router-link can be used to replace the a tag
router-linkIt is vue-router that provides a global component- The router-link will essentially be rendered as a link. The to attribute is equivalent to providing the href attribute (to does not need #)
- router-link provides the function of declarative navigation highlighting (self-contained class name)
code show as below:
<template>
<div>
<div class="footer_wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/part">朋友</router-link>
</div>
<div class="top">
<router-view></router-view>
</div>
</div>
</template>
//在控制台元素检查时会发现激活的类名 在样式style中定义高亮样式 点击时就会高亮
Advantages of router-link: It comes with the class name when it is activated, which can be highlighted
2. When jumping to the route, you can pass the value to the component corresponding to the route
The to attribute on the router-link passes the value, and the syntax format is as follows:
(method one)
to=/path?parameter name=value
example:
to="/part?name=张三"
The corresponding page component receives the passed value
$route.query.parameter name
Receive data: $route.query.name
(Method 2)
to="/path/value" (need to configure /path/:parameter name in routing rules)
example:
to="/part/李四"Configuration:
path:"/part/:username"
The corresponding page component receives the passed value (note that dynamic parameters need to be received with params)
$route.params.parameter name
Receive data: $route.params.username
3. Programmatic - use JS code to jump
Use JS code to jump
Syntax: choose one of path or name
1. The difference between$ router $ route
$router : is the routing operation object, write-only object
$route : routing information object, read-only object
$ router operation routing jump
this.$router.push({ name:‘hello’, query:{ name:‘word’, age:‘11’ } })
$route read route parameter reception
var name = this.$route.query.name;
2. The difference between the routing jump method name, path and the parameter passing method params and query (important)
Both path and name routing jump methods can use query to pass parameters
- Using the path method to jump to the route path will ignore params, so path cannot be used with params
- It is recommended to use name and query to realize routing jump
Params pass parameters, and push can only be name:'xxx', not path:'/xxx', because params can only use name to import routes. If path is written here, the receiving parameter page will be undefined! ! !
Pass parameters through params
==Attention:==The path using the name routing jump method here does not need to be added
/because it is just a name
this.$router.push({
name:"Home",
params:{
id:this.id
}
})
Another page receives:
Here, if you use params to pass parameters, you need to write params to receive
this.$route.params.id
Pass parameters through query
this.$router.push({
path:"/Search",
query:{ //query是个配置项
age:20
}
})
Another page receives
this.$route.query.age
query is equivalent to a GET request, when the page jumps, you can see the request parameters in the address bar
uery traditional**
this.$router.push({
path:"/Search",
query:{ //query是个配置项
age:20
}
})
Another page receives
this.$route.query.age
Summary:
query is equivalent to a GET request. When the page jumps, you can see the request parameters in the address bar
params is equivalent to a POST request, the parameters will not be displayed in the address bar