The Vue Router is the official route manager for vue.js and can hash components and render them without refreshing the page
Two routing modes of the Vue Router
Hash pattern
- Changing the hash value after # triggers an onHashChange event in which local operations are performed on the page
- Changes to the hash are logged by the browser (history stack) and can be moved forward, backward, and refreshed without sending a request to the server
- Redirect the route to the path in the vueRouter configuration file by matching the hash after #
The history mode
- Based on browser history pushState(), replaceState(), popState() to implement, can read, modify the browser history stack
- You can go forward and backward without sending requests to the server, but refreshing sends requests to the server
- If no resource is matched, 404 is returned, so background support is required to redirect to the root directory home page
Dynamic Route Matching
Use different parameters to match the same component
For example, if we have a generic article detail page that needs to display different content with different article ids, we can do this with article: ID
$route.params
A key/value object that contains dynamic fragments and fully matched fragments
Article /:id converts to > $route.params.id
article/123 => $route.params.id = 123
$route.query
A key/value object representing a URL query parameter
article? id=’123′ => $route.params.id = ‘123’
Navigation guard
Attention! Changing route parameters does not trigger entry/departure navigational guards
- Use watch to listen for $route
- Use the component internal guard beforeRouteUpdate to listen for changes
Global guard
Global front-guard < beforeEach >
Called when the navigation is triggered, the guard resolves asynchronously and the navigation is waiting until the guard isn’t resolved
= > code < = router. BeforeEach ((the to, from, next) = > {...})Copy the code
- You can perform permission verification at this stage
Global parsing guard < beforeResolve >
Emitted when the navigation is confirmed and both the intra-component and asynchronous guards are resolved
Global post-hook < afterEach >
Triggered after a navigation jump is complete
Router. AfterEach ((to, from) => {·····})Copy the code
Route exclusive guard
beforeEnter
const router = new VueRouter({
routes: [
{
path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... }}}])Copy the code
Component internal guard
Only defined within a component
beforeRouteEnter
BeforeRouteEnter (to, from, next) {// No! Can!!!! Get component instance 'this' because the component instance has not been created before the guard executes}Copy the code
- Called before the route to render the component is confirmed
- This cannot be accessed at this stage because the guard is called before navigation confirmation, before the component is created
- You can access this by setting a callback to next
BeforeRouteEnter (to, from, next) {next(VM => {access component instance through VM})}Copy the code
beforeRouteUpdate
BeforeRouteUpdate (to, from, next) {this.name = to.params.name}Copy the code
- Triggered when the navigation route changes and components are reused
- Inbound and outbound navigational guards cannot be triggered when reusing components
- Trigger this guard for routing
beforeRouteLeave
beforeRouteLeave (to, from, next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes! ')
if (answer) {
next()
} else {
next(false) // You can use this method to unnavigate}}Copy the code
- Triggered when leaving this navigation route
- Generally used to prevent users from leaving before saving changes