catalogue
2. What is the difference between $route and $route?
1 = = and = = = difference
= = =: it is called the equivalent when the values on both sides type When the types are the same, the values are directly compared. If the types are different, false is directly returned;
==: is an equivalent sign. When the types on both sides of the equal sign are the same, directly compare whether the values are equal. If they are different, first convert them to values of the same type, and then compare them;
2. What is the difference between $route and $route?
The $route object represents the current route information, including the information obtained from the current URL parsing. Contains the current path, parameters, query objects, etc.
**1.$route.path**
String, which corresponds to the path of the current route. It always resolves to an absolute path, such as "/foo/bar".
**2.$route.params**
One key/value Object, including dynamic fragments and fully matched fragments,
If there are no routing parameters, it is an empty object.
**3.$route.query**
One key/value Object, representing URL Query parameters.
For example, for paths /foo?user=1，Then there $route.query.user == 1，
If there are no query parameters, it is an empty object.
**4.$route.hash**
Current route hash value (No #), if there is no hash value, it is an empty string. Anchor point
**5.$route.fullPath**
After parsing URL，Contains query parameters and hash The full path of the.
**6.$route.matched**
Array, containing the configuration parameter objects corresponding to all fragments contained in the current matching path.
**7.$route.name Current path name**
**8.$route.meta Routing meta information
The $router object is an instance of the global route and an instance of the router construction method.
push
// character string
this.$router.push('home')
// object
this.$router.push({ path: 'home' })
// Named route
this.$router.push({ name: 'user', params: { userId: 123 }})
// With query parameters, it becomes / register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }})go
// Page route jump forward or backward this.$router.go(-1) // back off
replace
//The push method will add a new record to the history stack, while the replace method is to replace the current page,
Not to history Add a new record to the stack
05
// Generally, replace is used to make 404 pages
this.$router.replace('/')
When configuring routing path Sometimes '/' Sometimes not,with'/'The beginning will be treated as the root path, so the previous path will not be nested all the time.3 what is promise?
Within Promise, there is a state manager. There are three states: pending, fulfilled and rejected.
(1) The initialization status of promise object is pending.
(2) When resolve is called (successful), it will be determined by pending = > fully. then
(3) When reject is called, it will be rejected by pending = > rejected.
01 example
getData() .then(a => getMoreData(a)) .then(b => console.log(b));
- 2 promise can get or process a result after multiple requests are sent
-
Construct a Promise Instance needs to be given Promise Constructor passes in a function. The function passed in needs to have two formal parameters, both of which are function Parameter of type. namely resolve and reject. Promise There's more then method, then Method is used to specify Promise Determine the operation to be performed when the state of the object changes, resolve Execute the first function when( onFulfilled)，reject Execute the second function when( onRejected) When the status changes to resolve Time can no longer become reject，On the contrary, the same is true.
Note:
Is an asynchronous function The solution is mainly to solve the problem of callback hell (calling functions inside functions, resulting in multi-layer nesting, resulting in poor readability and maintainability of the code); promise itself is a function. It has three methods: resolve, reject and all; There are then (), catch () methods in the prototype
4 what is nested routing?
To render components into this nested router view, we need to configure children in the route:
const routes = [
{
path: '/user/:id',
component: User,
children: [
{
// When / user/:id/profile matches successfully
// The UserProfile will be rendered inside the User's < router View >
path: 'profile',
component: UserProfile,
},
{
// When / user/:id/posts match successfully
// UserPosts will be rendered inside the User's < router View >
path: 'posts',
component: UserPosts,
},
],
},
]Redirection and alias
const routes = [
{
// /search/screens -> /search?q=screens
path: '/search/:searchText',
redirect: to => {
// Method receives the destination route as a parameter
// return redirected string path / path object
return { path: '/search', query: { q: to.params.searchText } }
},
},
{
path: '/search',
// ...
},
]What is the routing guard
In short, navigation guard is some hook functions in the process before, during and after route jump function Can let you operate some other things, this is the navigation guard. The navigation guard is divided into three types: global, in component and single route exclusive
1.1 Global
It refers to the hook function directly operated on the routing instance. Its feature is that all components configuring routing will trigger
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
Hook functions for global routing include
- beforeEach
Triggered before route jump. The parameters include to, from and next (parameters will be introduced separately). This hook is mainly used for login verification - beforeResolve(2.5+)
This hook is similar to beforeEach. It is also triggered before route jump. The parameters are to, from and next. Refer to the official website for the difference between beforeEach and this hook. - afterEach
- It is triggered after the route jump is completed. The parameters include to and from. It occurs after beforeEach and beforeResolve and before beforeRouteEnter (guard in the component).
-
Route guard callback parameters
-
to: target routing object;
-
from: the routing object to leave;
-
next: it is the most important parameter. It is equivalent to the thread of Buddha beads, stringing beads one by one.
Routing implementation of Vue
Vue routing implementation, hash mode and history mode
1.1. hash mode
What is it?
In the browser link, the character after the symbol "#" is called hash, using window location. Hash read;
characteristic
Although the hash is in the URL, it is not included in the HTTP request;
It is only used to guide the browser action and is harmless to the server,
hash does not reload the page.
1.2 history mode
What is it?
History mode is a new feature of HTML5; It also provides two new methods: pushState() and replaceState() to modify the browser history stack and listen to the state change of popState event.
characteristic
In the history mode, the URL of the front end is included in the HTTP request, such as http://www.xxx.com/items/id .
If the back-end manages the address of the request interface and lacks the processing of its corresponding route, a 404 error will be returned. (that is to say, the background processing of an interface can only request for a page link, and the interface cannot request access to other pages)
Jump mode between routes
- 1.1. Directly modify the routing address in the address bar
- 1.2. Skip through router link
<router-link to="/myRegister">register</router-link>
Modify the jump address through the next method in the navigation hook
beforeRouteEnter (to, from, next) {
next('/login')
}
Dynamic routing configuration and acquisition of dynamic parameters
1.1 dynamic routing configuration
Index. In router directory JS file, add the following before the places in the path attribute that need dynamic configuration:
routes: [
{
path: '/foo/:id',
component: Foo
}
]
Acquisition of dynamic parameters
this.$route.params //params objects are all parameters passed in
Router link routing parameters
1. Query parameters
//query parameters
<router-link :to="{path:'/test',query: {name: id}}">Jump</router-link>
//Get parameters
this.$route.query
2.params parameter transmission
//Dynamic routing router / index js
routes: [
{
path: '/test/:id',
component: Foo
}
]
// id is the dynamic parameter of route configuration
<router-link :to="'/test/'+id">Jump</router-link>
//Acquisition method
this.$route.params