After reading vue-Router for three times recently, I began to have some understanding of it. Moreover, for beginners, I think the order of vue-Router official manual is not applicable. Therefore, I adjusted the order of vue-Router official manual in my opinion, hoping to help other beginners. Progress together ~

Configuring the Routing Mode

Const router = new VueRouter({// create router instance mode: 'history', routes})Copy the code

Configure the routing mode:

  • Hash: Uses the URL hash value for routing. Support for all browsers, including those that don’t support the HTML5 History Api.

  • History: Relies on the HTML5 History API and server configuration. Check out the HTML5 History mode.

  • Support all JavaScript runtime environments, such as node.js server side. If the browser API is not found, routing automatically forces the mode into this mode.

Hash mode (default)

The HASH of the URL is used to simulate a full URL so that the page does not reload when the URL changes.

The history mode

Using history to jump to a URL without reloading the page.

Because our application is a single-page client application, if the background is not properly configured, when the user accesses oursite.com/user/id directly from the browser, it will return 404, which is not pretty.

Note that to prevent 404 errors, you need to write a notFound.html page in case the page cannot be found.

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

Dynamic Route Matching

There is currently A path /foo, and when you have /foo/XXX, whatever XXX is, you need it to display some component: A, or route to A page, using dynamic routing configuration

Copy code to view effect online test address Click preview

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/bar">/user/bar</router-link>
    <router-link to="/user/aa">/user/aa</router-link>
    <router-link to="/user/bb">/user/bb</router-link>
  </p>
  <router-view></router-view>
</div>Copy the code
{{$route.params. ID}}</div> '} router = new VueRouter({routes: [{routes:]) const User = {template: '<div> your ID is {{$route.params. ID}} /div>'} '/user/:id', component: User } ] }) const app = new Vue({ router }).$mount('#app')Copy the code

Embedded routines by

/foo/a and /foo/b can have two child routes to page A and page B, respectively. Nested routes can be used.

Programmatic navigation

  1. That means you can control routing in your code, including several jump functions.

  • Router.push (location) history will be recorded

  • Router.replace (location) history is not recorded

  • Router.go (n) jumps forward or back several pages in the history

Router.go (-1) router.go(3) router.go(-1) router.go(-1)Copy the code

  1. The value of location can be of one of the following types:

  • ‘home’

  • {path:’home’}

  • {name: ‘user’, params: {userId: 123}} // Name the route, become /user/123

  • {path: ‘register’, query: {plan: ‘private’}} // Change to /register? plan=private

Named view

A view is called a router-view, which means that a page can have multiple views, one for each component. A route with n views and n components displays multiple components at a time.

<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>Copy the code
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})Copy the code

Routing information object

A Route Object represents the status information of the currently active route, including the information obtained from the current URL resolution, as well as the Route Records that the URL matches.

Route objects appear in multiple places:

  • This.$route and $Route Watcher callbacks within components (to monitor change handling);

  • Router.match (location) return value

  • Parameter to the scrollBehavior method

  • Navigation hook parameters:

Route. beforeEach((to, from, next) => {// To and from are both routing information objects.Copy the code

Specific and other attributes please go to see the official documentation

Router construction configuration

There are several important things that can go wrong

declare type RouteConfig = { path: string; component? : Component; name? : string; // for named routes (named routes) components? : { [name: string]: Component }; // for named views redirect? : string | Location | Function; alias? : string | Array<string>; children? : Array<RouteConfig>; // for nested routes beforeEnter? : (to: Route, from: Route, next: Function) => void; meta? : any; }Copy the code

scrollBehavior

Scroll to the middle of the page, next page, click the Browser back button, keep the previous page, use vue-router to return to the previous page, and start again from the top of the browser.

scrollBehavior: function (to, from, savedPosition) {
        return savedPosition || { x: 0, y: 0 }
    },Copy the code

  • SavedPosition: Before returning using a normal browser, follow the browser properties and record the browsing position

  • {x: 0, y: 0} : Displays from the top of the page that uses vue-router

Reference documentation

  • Vue – the router manual