Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Abstract

Vue Router is the official route manager for vue. js, which is deeply integrated with the vue. js core, making it easy to build single pages.

The installation

CDN/ Direct download

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
Copy the code

NPM

npm install vue-router
Copy the code

The body of the

Declarative navigation: use<router-link>Create the A tag to define the navigation link

1. Basic route writing method

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

const router = new VueRouter({
    routes: [{ path: '/user/:id'.component: User }]
})
Copy the code

2, set by

const router = new VueRouter({
    routes: [{path: '/user/:id'.component: User,
            children: [{path: 'posts'.component: UserPosts },
                { path: 'profile'.component: UserProfile }, ] }, { ... Other routes}]})Copy the code

Programmatic navigation: use$router

Router. Push (location, onComplete? , onAbort?)

Route instances can be accessed through $router, such as this.$router.push

/ / string
router.push('home')

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

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

// With query parameters
router.push({ path: 'register'.query: { plan: 'private' }})
Copy the code
usage parameter instructions
router.push location, onComplete? , onAbort? Add a new record to the history stack, for example, after the user clicks the browser back button

You can return the previous URL, equal to<router-link :to="..." >
router.replace location, onComplete? , onAbort? Replacing the current history does not add a new record to history
router.go n N is an integer representing n steps forward or backward in history

Route component parameters are transmitted

// Using $route makes it highly coupled to its corresponding route
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [{ path: '/user/:id'.component: User }]
})
Copy the code
// Decouple const User = {props: ['id'], template: '<div>User {{ id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true } ] })Copy the code

The Boolean model

If props is set to true, route.params is set to the component property

const router = new VueRouter({
  routes: [{path: '/user/:id'.component: User, props: true}]})Copy the code

Object pattern

This is useful when props is static and is set as a component property as-is

const router = new VueRouter({
  routes: [{path: '/promotion/from-newsletter'.component: Promotion,
      props: { newsletterPopup: false}}}])Copy the code

The function mode

You can convert parameters to another type, combine static values with route-based values, and so on

const router = new VueRouter({
  routes: [{path: '/search'.component: SearchUser,
      props: route= > ({ query: route.query.q })
    }
  ]
})
Copy the code

History mode and Hash mode

History Hash
The URL without# The URL is#
Moving forward or backward doesn’t reload the page, but refreshing does ask the server,

If the server has no response or resources, a 404 page appears		 URL changes do not reload the page and are not included in the HTTP request 
const router = new VueRouter({
  mode: 'history'.routes: [...]. })Copy the code