30 minutes to learn how to use Vue-Router to build a Single page application (SPA)

What is a single page app

Single Page Web Application (SPA) is an application with only one Web page. A single-page application (SPA) is a Web application that loads a single HTML page and dynamically updates that page as the user interacts with the application. The browser starts by loading the required HTML, CSS, and JavaScript, and everything is done on this page, all controlled by JavaScript. Therefore, modularity development and design is very important for single-page applications.

Advantages and disadvantages of single page application

[1] Advantages

Smooth operation experience: similar to the feeling of local apps, there is no frequent “interruption” feeling during switching. Because the interface framework is local, and the communication with the server is basically only data, it is easy to migrate. It can be migrated into desktop products or various Hybrid mobile products with relatively small cost.
Complete front-end componentization: front-end development no longer takes the page as the unit, more adopts the idea of componentization, the code structure and organization mode are more standardized, easy to modify and adjust;
API sharing: If your service is multi-server (browser side, Android side, iOS side, wechat side, etc.), the single-page application mode allows you to share the API across multiple sides, which can significantly reduce the workload on the server side. The easily changeable UI parts have been pre-loaded, and apis that are only affected by the business data model are easier to stabilize and provide better services;
Component sharing: In some scenarios with low requirements on performance experience or in the rapid trial-and-error stage of the product, components can be shared at multiple ends with the help of technologies such as Hybrid and React Native, facilitating rapid product iteration and saving resources.

[2] Disadvantages

Loading a large number of resources for the first time: To provide users with all the functions of the product on one page, a large number of static resources must be loaded first when the page is loaded, which takes a relatively long time. However, routing lazy loading can be used to solve this problem
Not friendly to search engines: Because most of the interface is dynamically generated, it is difficult for search engines to index it.
The development is relatively difficult: the developer must have good JavaScript skills and an understanding of componentization and design patterns, and he is no longer dealing with a simple page, but with desktop software running in a browser environment.

What is vue-router

Vue-router is the official routing plug-in of vue.js. It is deeply integrated with vue.js and suitable for building single-page applications. The single-page application of VUE is based on routing and components, which are used to set access paths and map paths to components. The traditional page application uses some hyperlinks to realize the page switch and jump. In vue-Router single-page applications, it is switching between paths, that is, switching between components. The essence of a routing module is to establish a mapping between urls and components.

As for why we can’t use the A tag, it’s because Vue is a single page application (when your project NPM run build is bundled, it generates the dist folder, which only contains static resources and an index.html page), so the <a></a> tag you write to jump to the page won’t work. You must use vue-router for administration.

Install vuE-Router

npm install vue-router --save-devCopy the code

Configure and simply use vue-Router

[1] Create a router folder under SRC and add an index.js file to it

[2] introduced in main.js file

[3] Configuration of index.js under router file

import Vue from 'vue'
import Router from 'vue-router'

// Introduce the page1 and page2 components
import page1 from '@/components/page1'
import page2 from '@/components/page2'

Vue.use(Router)

export default new Router({
  // Define routes. Each route should map to a component. Component corresponds to the imported component name
  routes: [
    {
      path: '/page1'.name: 'page1'.component: page1
    },
    {
      path: '/page2'.name: 'page2'.component: page2
    },
  ]
})Copy the code

[4] Use

We have configured routes /page1 and /page2, which can be used in app.vue

<template>
  <div id="app">
    <! <router-link> will be rendered as a '<a>' tag by default. <router-link> will be rendered as a '<a>' tag by default. Router-link-active --> Router-link-active -->
    <router-link to="/page1">page1</router-link>

    <! -- Navigation via route set name value -->
    <router-link :to="{name: 'page2'}">page2</router-link>

    <! -- Use programmatic navigation -->
    <span @click="gotoPage1">gotoPage1</span>

    <! -- Trap, route matching components will be rendered here -->
    <router-view />
  </div>
</template>

<script>
  export default {
    methods: {
      gotoPage1() {
        // Programmatic navigation
        this.$router.push('/page1')}}}</script>Copy the code

[5] Effect

This.$router = this.$route

[1] Router: is an instance of VueRouter, which is equivalent to a global router object. It contains many properties and sub-objects, such as the history object.

[2] Route: equivalent to the current route object, from which you can obtain name,path,params,query, etc

Dynamic routing

[1] Official explanation

Dynamic path parameters, marked with colon:. When a route is matched, the parameter value is set to this.$route.params, which can be used within each component.

You can set multiple “path parameters” in a route, and the corresponding values are set to $route.params. Such as:

model	Matching path	$route.params
/user/:username	/user/evan	{ username: ‘evan’ }
/user/:username/post/:post_id	/user/evan/post/123	{username: ‘evan’, post_id: ‘123’}

[2] Applicable scenarios

For example, the product details page, the page structure is the same, but the product ID is different, so this time can use dynamic routing.

Configure dynamic route parameters

// Configure the route
const router = new VueRouter({
  routes: [
    // Dynamic path parameters start with a colon
    { path: '/goods/:id'.component: goods}
  ]
})Copy the code

Goods components

  <template>
    <div>{{$route.params.id}}</div>
  </template>Copy the code

Type /goods/123 in the browser address bar

Eight, set by

Nested routing is a route with nested children, whose key attribute is children

Each child route can house multiple components, which in turn have routing navigation and routing containers

For example, suppose the page page contains a home child and a goods child

Configure nested routing (add a children attribute under the page route and configure home and Goods routes)

export default new Router({
  // Define routes. Each route should map to a component. Component corresponds to the imported component name
  routes: [
    {
      path: '/page'.name: 'page'.component: page,
      children: [{
        path: '/page/home'.name: 'home'.component: home,
      }, {
        path: '/page/goods'.name: 'goods'.component: goods,
      }]
    },
    {
      path: '/page2'.name: 'page2'.component: page2
    },
  ]
})
Copy the code

Page component Configuration

<template>
  <div>
    <p>Page components</p>
    <router-link to="/page/home">home</router-link>
    <router-link to="/page/goods">goods</router-link>

    <! -- Trap, matching sub-components will be rendered here -->
    <router-view></router-view>
  </div>
</template>Copy the code

The effect

Programmatic navigation

【 1 】 the router. Push

Click

is equivalent to calling this.$router.push(…)

Inside the Vue instance, you can access the routing instance through $router, so you can call this.$router.push

declarative	programmatic
< the router – link: to =”`.`“>	router.push(`.`)

$router.push(…) Can be a string path, or an object describing an address. Such as:

        / / string
        router.push('home')

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

        // Named route
        router.push({ name: 'user'.params: { userId: '123'}})// With query parameters, change to /register? plan=private
        router.push({ path: 'register'.query: { plan: 'private'}})// Note: params is ignored if path is provided. You need to provide a route name or a handwritten path with parameters
        const userId = '123'
        router.push({ path: '/user'.params: { userId }}) // -> /user params is not valid
        router.push({ name: 'user'.params: { userId }}) // -> /user/123 params takes effect
        router.push({ path: `/user/${userId}` }) // -> /user/123 params takes effect
        Copy the code

【 2 】 the router. The replace

Much like router.push, the only difference is that it does not add a new record to history, but instead replaces the current history record with its method name.

【 3 】 the router. The go (n)

This method takes an integer that means how many steps forward or backward in the history, similar to window.history.go(n).

Forward () router.go(1) Back () router.go(-1) router.go(3) router.go(-3)Copy the code

10. Named routes

Add a name attribute to routers when configuring routes. It is more convenient to identify a route by name, especially when the path name of a nested set is very long

export default new Router({
  routes: [{path: '/page'.name: 'page'.component: page,
      children: [{
        path: '/page/home'.name: 'home'.component: home,
      }]
    },
  ]
})
Copy the code

You can navigate to the /page/home path in any of the following four ways

    <router-link to="/page/home">home</router-link>
    <router-link :to="{name: home}">home</router-link>Copy the code

    this.$router.push('/page/home')
    this.$router.push({name: home})Copy the code

Named views

In simple terms, we define different names for different router-views and render the corresponding components by their names. If router-view does not have a name, it defaults to default.

[1] Applicable scenarios

For example, when creating a layout with topNav(top navigation), sidebar (side navigation) and main (main content) views, named views come in handy.

Configuring routes: Three components are defined under the root route

Index (main content) : mapped to the default router-view view

TopNav: Mapped to the router-view whose name is top

SideNav (sidebar) : maps to the router-view view whose name is side

export default new Router({
  routes: [{path: '/'.components: {
        default: Index,
        side: SideNav,
        top: TopNav,
      },
      children: [{
        path: '/home'.component: Home,
      }, {
        path: '/goods'.component: Goods,
      }]
    },
  ]
})Copy the code

App.vue file (add the name attribute to create two named views and a default default view)

    <router-view class="view one" name="top"></router-view>
    <router-view class="view two" name="side"></router-view>
    <router-view class="view three"></router-view>Copy the code

The effect

Redirects and aliases

[1] Redirect

/a is redirected to /b, and when the user accesses /a, the URL is replaced with /b and navigated to the /b page

    // The redirect target can be a path
    { path: '/a'.component: A, redirect: '/b',},// The redirect target can also be a named route
    { path: '/a'.component: A, redirect: {name: 'b'}},
    
    // Even a method
    { path: '/a'.component: A, redirect: to= > {
      // The method receives the destination route to as a parameter to contain attributes such as hash, params, and query
      // Return redirects the string path/path object
      return '/b'
    }}Copy the code

【2】 Alias

The alias for /a is /b, which means that when the user accesses /b, the URL remains /b, but navigates to the/A page just as the user accesses /a.

  routes: [
    { path: '/a'.component: A, alias: '/b'}]Copy the code

Vue – Router mode

[1] Hash (default)

Hash mode URL: http://www.abc.com/#/hello

Hash is the hash symbol in the URL of the address bar, such as this URL: http://www.abc.com/#/hello. The hash value is #/hello. The feature is that the hash appears in the URL but is not included in the HTTP request and has no impact on the back end, so changing the hash does not reload the page.

[2] the history

History mode URL: http://www.abc.com/hello

Sometimes, because of obsessive-compulsive behavior, you can’t tolerate the presence of # symbols on modal urls, or because of business requirements, urls can’t have # symbols. At this time, the vue-router history mode should be considered. The front-end configuration of the History mode is basically the same as the previous one, but the jump of URL path in the history mode is dynamically added by vue-router using the HISTORY API of H5. Manually refreshing the page will cause a 404 error because routes cannot be found. Therefore, you need to configure the server to redirect routes to the level-1 page

[3] Mode configuration

export default new Router({
  mode: 'history'.routes: [...]. })Copy the code

14. Route guard

Vue – Route Guard (Lifecycle of routes)

The article is updated every week. You can search “Front-end highlights” on wechat to read it in the first time, and reply to [Books] to get 200G video materials and 30 PDF books