material
Official Website: https://v3.router.vuejs.org/zh/guide/Silicon
Valley Video: https://www.bilibili.com/video/BV1Zy4y1K7SH?p=118
basic use
Install:
Install vue3.x here
- Vue 2.x version corresponds to vue-router 3.x
- Vue 3.x version corresponds to vue-router 4.x
- other and so on
npm i vue-router@3
configuration file
Define two components: Foo, Bar, used as routing components
Create a new router/index.js file in the src directory, the general content:
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
// 1. 定义 (路由) 组件。
import Foo from "../components/Foo"
import Bar from "../components/Bar"
// 2. 定义路由
const routes = [
{
path: '/foo', component: Foo },
{
path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
export default new VueRouter({
routes // (缩写) 相当于 routes: routes
})
Later, the routing-related components will be placed /pagesunder the path
Modify main.js
main.js add the following content:
use routing
Summarize
multi-level routing
example
Define two components: Bar01 and Bar02
as sub-routes of Bar: (without "/")
use:
- router-link defines navigation (write full path)
- Where is the router-view definition displayed?
Summarize:
routing parameters
query parameter
Note: Use $route.query.xx(be sure to use $route instead of $router) to receive, even if you use string writing, you must use query to receive!
params parameter
props configuration
named route(name)
Premise: You must use the object notation of to, if you use the string notation, it will be treated as a path (path)
properties of router-link
replace
Programmatic Routing Navigation
For example, you want to jump through the following four buttons:
complete push and replace jumps through click events:
Summarize:
Cache routing components:
Use the keep-alive tag to wrap the router-view tag, and use include to specify which components to cache. If not specified, all components displayed in the router-view will be cached. The value of include is the component name, which is this value:
Summary:
If you want to cache more than one, you can use it :include="['name1','name2']"to achieve
Two new lifecycle functions
route guard
global guard
When defining a route, use the following method to identify the permissions required to access the component:
- meta is the meta information of the route, allowing us to store something in it;
- isAuth is a variable we saved, of course, other variable names can also be used
After creating a routing instance, configure the global pre- and post-guards in the following ways:
- to: where to jump
- from: from where
- next: call next() to indicate release
Key code:
1. Configuration meta:
meta: {
isAuth: true
}
2. Configure global guards
//配置全局守卫
router.beforeEach((to, from, next) => {
if (to.meta.isAuth) {
//权限控制逻辑...
if (confirm("是否授权")) {
next();
} else {
return;
}
}
//放行
next();
})
router.afterEach((to, from) => {
console.log("跳转成功...", to);
})
exclusive guard
When defining a route, use beforeEnter to set an exclusive guard for a certain route: its parameters are exactly the same as the beforeEach parameters of the global guard.
key code:
beforeEnter: (to, from, next) => {
//权限控制逻辑...
if (confirm("是否授权foo02")) {
next();
}
}
Guards within components
Use the following two methods in the component to define the guard in the component
- beforeRouteEnter: Enter the guard: it is called when entering the component through routing rules
- beforeRouteLeave: Leave guard: Called when leaving the component through routing rules
key code:
beforeRouteEnter(to,from,next){
alert("将要通过路由规则进入Bar")
next()
},
beforeRouteLeave (to, from, next) {
alert("将要通过路由规则离开Bar")
next()
}
Summarize
routing mode
Currently, there are three optional values:
official website explanation: https://v3.router.vuejs.org/zh/api/#mode
Summarize:
