当前位置:网站首页>Router object, route object, declarative navigation, programmed navigation
Router object, route object, declarative navigation, programmed navigation
2022-04-23 17:15:00 【MiMenge】
Router and Route
When we create an instance VueRouter
when
let router = new VueRouter();
There will be a whole picture router Router object , This router object can pass through... On other routing components An instance of the routing component .$router
Access to
When jumping to a new route , It will create a new one route Instance object
, Each routing instance is unique , Save the status information of the current route .
Be careful : There is only one in the application Router object , Accessed in each routing component Router object It's all one Router example
, Between each other same
, But every one of them Between routes
Of route
yes Different
.
Attribute method
$router
console.log(this. $ router);
- attribute
attribute | describe |
---|---|
options | Saved the original configuration object that created the route |
currentRoute | Address information and information of the current route this.$route Agreement |
- Method
+ Method
- addRoute(parentName, route) : Add a row of route records to the route
- afterEach(to, from, failure) : Global route navigation post guard , Execute every time after switching routes
- beforeEach(to, from, failure): Global route navigation front guard , Every time before switching routes
- push({
path: Routing path ,
name: Routing name ,
query:{
} Delivered query Parameters ,
params:{
} Delivered params Parameters ,
}): Jump to a route , Jump to... In the way of programmed navigation , Pass in an object
Consistent with the declarative route navigation configuration properties , Because it is pushing a record into the record stack
So jump back Will be back to back Previous routing records ( Not replaced )
- replace({
}) : Jump to a route , Navigate programmatically , Parameters and push Agreement
Because the current record of the routing record stack is replaced by , So you can't go back to the previous record after jumping
You can only go back to the previous record of the previous record ( Replaced )
- resolve({
}): Jump to a new page , Parameters and push Agreement
- back(): Go back to the previous route
- forward(): Forward a route record in the historical route
- getRoutes(): Get a complete list of routes
- go(num): Forward or backward in the historical routing record , Before or after depends on the plus or minus of the parameter
- hasRoute(routeName): Check whether there is a specified name The routing
- removeRoute(routeName): Remove the corresponding route record in the stack
- onError(function(err)···): Capture errors that occur during navigation
$route
console.log(this.$route);
- fullPath : Jump to the full path of the route
- hash: Currently routed hash value , Nothing is empty
- meta: Routing meta information
- name: The name of the route definition
- matched : Array , Contains configuration parameter objects corresponding to all fragments contained in the current matching path .
- path: The absolute path corresponding to the current route ( obtain )
- params: Currently routed params Parameters ( obtain )
- query: Currently routed query Parameters ( obtain )
Declarative navigation and functional navigation
Navigation :
A route is executed once , It's just a navigation . Navigation can be divided into declarative navigation and programmatic navigation .
Declarative navigation :
A routing component ( Such as router-link) Route jump can be realized by clicking , This process is called “ Declarative navigation ( static state )”.
Programming navigation :
Switching execution is not achieved through declarative navigation , Through the way of program code , Namely “ Programming navigation ( dynamic )”.
Implementation of programming navigation :
Use directly through router objects js Code operation
1. Declarative navigation is rendered directly to the page , such as a link
2. Programmed navigation is used in js After processing the logic, you need to jump to the page , For example, click on button Button jump
版权声明
本文为[MiMenge]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230553027382.html
边栏推荐
- Linux MySQL data timing dump
- ClickHouse-SQL 操作
- El date picker limits the selection range from the current time to two months ago
- Multithreaded @ async thread pool
- groutine
- C语言程序设计之函数的构造
- 1-2 JSX syntax rules
- freeCodeCamp----prob_ Calculator exercise
- Decimal format decimal / datetime conversion processing
- Redis docker installation
猜你喜欢
Grpc gateway based on Ocelot
XTask与Kotlin Coroutine的使用对比
For the space occupation of the software, please refer to the installation directory
Sub database and sub table & shardingsphere
Further study of data visualization
Deep understanding of control inversion and dependency injection
VLAN高级技术,VLAN聚合,超级Super VLAN ,Sub VLAN
[PROJECT] small hat takeout (8)
线性代数感悟之2
Clickhouse table engine
随机推荐
Freecodecamp ---- budget & category exercise
【题解】[SHOI2012] 随机树
2. Electron's HelloWorld
RPC核心概念理解
El date picker limits the selection range from the current time to two months ago
Shell-入门、变量、以及基本的语法
1-3 components and modules
Summary of common websites
SQL: How to parse Microsoft Transact-SQL Statements in C# and to match the column aliases of a view
Generate random numbers with high quality and Gaussian distribution
VsCode-Go
tidb-server 的配置文件在哪里?
Promise (III)
Tencent resolves the address according to the IP address
SPC introduction
Conversion between hexadecimal numbers
Detailed explanation of Milvus 2.0 quality assurance system
JSON deserialize anonymous array / object
Solution of Navicat connecting Oracle library is not loaded
freeCodeCamp----shape_ Calculator exercise