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