Vue Router summary (from official website)

1. Introduction to Vue router function

• Nested route / view tables
• Modular, component-based routing configuration
• Routing parameters, queries, wildcards
• View transition effect based on Vue.js transition system
• Fine grained navigation control
• Links with automatically activated CSS class es
• HTML 5 history mode or hash mode, automatically degraded in IE9
• Custom scroll bar behavior
• Three routing modes (hash,history,abstract)

2. Dynamic routing configuration

General parameters:

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // Dynamic path parameters start with a colon
    { path: '/user/:id', component: User }
  ]
})

be careful:

You can use watch for route monitoring

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // Respond to route changes
    }
  }
}

Or use the beforeRouteUpdate navigation guard introduced in 2.2

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

Unconventional parameters

{
  // Will match all paths
  path: '*'
}
{
  // Will match any path starting with '/ user -'
  path: '/user-*'
}

3. Nested route

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // When / user/:id/profile is matched successfully,
          // UserProfile will be rendered in User's < router View >
          path: 'profile',
          component: UserProfile
        },
        {
          // When / user/:id/posts match successfully
          // UserPosts will be rendered in User's < router View >
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

be careful:

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // When the / user/:id matches successfully,
        // UserHome will be rendered in User's < router View >
        { path: '', component: UserHome },

        // ... other sub routes
      ]
    }
  ]
})

4. Program navigation

1).router.push(location, onComplete?, onAbort?)

// character string
router.push('home')

// object
router.push({ path: 'home' })

// Named route
router.push({ name: 'user', params: { userId: '123' }})

// With query parameter, / register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

be careful:

2).router.replace(location, onComplete?, onAbort?)

3).router.go(n)

// Take a step forward in the browser record, which is equivalent to history.forward()
router.go(1)

// One step back recording, equivalent to history.back()
router.go(-1)

// 3 steps forward record
router.go(3)

// If the history record is not enough, it will fail silently
router.go(-100)
router.go(100)

Summary:

5. Named view

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

be careful:

6.HTML5 History mode

Background configuration example:

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}

Native Node.js

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

warning

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

7. Navigation guard

• Global front guard beforeEach

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
  // Proceed to the next hook in the pipe. If all hooks are completed, the navigation status is * * confirmed * *.
  next();
  // Interrupt the current navigation. If the URL of the browser changes (maybe the user manually or the browser Back button), the URL address will be reset to the address corresponding to the 'from' route.
  next(false): 
  // Jump to a different address. The current navigation is interrupted and a new navigation is performed. You can pass any location object to 'next', and you can set options such as' replace: true ',' name: 'home', and any 'to ` prop' (https://router.vuejs.org/zh/api/ #) or [` router. Push '(https://router.vuejs.org/zh/api/ #) used in [` router link].
  next('/')`perhaps`next({ path: '/' })
  // If the parameter passed in 'next' is an instance of 'Error', the navigation will be terminated and the Error will be passed to the registered callback of [` router. Onerror() '] (https://router.vuejs.org/zh/api/ #router-onerror).
  next(error)
})

• Global resolution guard beforeResolve

const router = new VueRouter({ ... })

router.beforeResolve((to, from, next) => {
  // ...
  next();
})

• Global after hook after each

const router = new VueRouter({ ... })
// Post hook does not accept next parameter
router.afterEach((to, from) => {
  // ...
})

• Route exclusive guard before enter

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

• Guard in component beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // Before rendering the component, the corresponding route is called before confirm.
    // No Yes! Get component instance ` this`
    // Because before the guard executes, the component instance has not been created
  },
  beforeRouteUpdate (to, from, next) {
    // Called when the current route changes, but the component is reused
    // For example, for a path with dynamic parameters / foo/:id, when you jump between / foo/1 and / foo/2,
    // Because the same Foo component is rendered, the component instance is reused. And the hook will be called in this case.
    // Can access component instance ` this`
  },
  beforeRouteLeave (to, from, next) {
    // Called when the navigation leaves the corresponding route of the component
    // Can access component instance ` this`
  }
}

8. Complete navigation analysis process

1. Navigation is triggered.
2. Call the leave guard in the deactivated component.
3. Call the global 'beforeEach' guard.
4. Call 'beforeRouteUpdate' guard (2.2 +) in the reused component.
5. Call 'beforeEnter' in routing configuration.
6. Resolve asynchronous routing components.
7. Call 'beforeRouteEnter' in the activated component.
8. Call the global 'beforeResolve' guard (2.5 +).
9. Navigation confirmed.
10. Call the global 'afterEach' hook.
11. Trigger DOM update.
12. Call the callback function passed to 'next' in the 'beforeRouteEnter' guard with the created instance.

9. Transition dynamic effect

<transition name="fade">
  <router-view></router-view>
</transition>

.fade-enter-active, .fade-leave-active { 
     transition: opacity .5s; 
} 
.fade-enter, .fade-leave-to { 
     opacity: 0; 
}

10. Data acquisition

• Get data after navigation

export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // Get the data after the component is created,
    // At this time, the data has been observed
    this.fetchData()
  },
  watch: {
    // If the route changes, the method is executed again
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

• Get data before navigation is complete

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // Before the route changes, the component has finished rendering
  // Slightly different logic
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

11. Rolling behavior

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return where do you want to scroll
    // When you press the back / forward button, it's like the browser's native behavior
    if (savedPosition) {
       return savedPosition
    } else {
        return { x: 0, y: 0 }
    }
    // Or enable anchors
    if (to.hash) {
        return {
            selector: to.hash
        }
    }
  }
})

12. Route lazy loading

Combining the asynchronous component of Vue and the code division function of Webpack, the lazy loading of route is realized

1) An asynchronous component is defined as a factory function that returns a Promise (the Promise returned by this function should resolve the component itself):

const Foo = () => Promise.resolve({ /* Component definition object */ })

2) In Webpack 2, we can use the Dynamic import Syntax to define a code split point:

import('./Foo.vue') // Back to Promise

Combine 1) and 2) to achieve lazy loading of routes, as follows:

const Foo = () => import('./Foo.vue')