01. Use basic routes

(1) Route definition

  • Definition of a route:

    // Step 1: Import the necessary files
import Vue from 'vue' // When loading a global component, you need to import Vue
import VueRouter from 'vue-router' Vue / / in the router

import Home from '@/components/home' // Import the components needed in the routing
import About from '@/components/About'
Copy the code
    // Step 2: Load the Router
Vue.use(Router) // Load the global component Router
Copy the code
    // Step 3: Configure route instance Routes
const routes = [
    {
        path: '/home'.name: 'Home'.// Set a unique name for the route.
        component: Home // is the component imported in the first step
    },
    {
        path: '/about'.name: 'About'.component: About
    }
]
Copy the code
    // Step 4: Configure the Router
const router = new VueRouter({
    routes
})
Copy the code
    // Step 5: Export the routing file
export default router
Copy the code

(2) Component configuration

  • Configure

    and

    within the VUE component

    • router-link
      • Mapping routes is to create routesaTag to define links for routing navigation (users click to jump to)
      • throughtoProperty specifies the destination address, rendered with the correct link by default<a>The label
    • router-view
      • Render the view component you route to within the tag
      • router-viewSupport nestedrouter-view
    <template>
    <div>
        <router-link to="/home"></router-link>
        <router-link to="/about"></router-link>
        <router-view>The matched route will be displayed here, and the content between the pair of tags will not be displayed on the page</router-view>
    </div>
</template>
Copy the code

(3) Mount is introduced

  • Introduce mount in main.js file

    // import from main.js file
import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './router'

Vue.use(VueRouter); // Mount properties

new Vue({
    el: '#app',
    router, // Let vue know our routing rules
    render: h= > h(App),
})
Copy the code

02. routesConfiguration items

(1) Set routine bychildren

  • Use the children attribute to define the nested route of the current route

    • In addition, the component corresponding to the parent route needs to be added<router-view>Is used to display child routes
    const routes = [
    {
        ...
        // Configure child routes
        children: [{
            // This parameter configuration is the same as the previous route configuration
            path: '/child'.name: 'Child'.// You can also nest child routes in child routes
            children:[{...}, {...}]},]Copy the code

(2) RedirectredirectWith an aliasalias

  • Use the Redirect attribute to redirect routes

    Redirect can be a path, a named route, a method (dynamic return)

    Redirection intercepts the route path and replaces the URL to redirect to the path/route specified by the Redirect

  • The alias attribute is used to configure the alias of the route

    After the alias is configured, a route has two paths. Accessing either path actually points to the same route

    const routes = [
    {
        // When accessing [/home], it redirects to [/another]
        path: '/home'.redirect: '/another'}, {// When you access [/else], you actually access [/about], but the address bar URL appears as [/else]
        path: '/about'.alias: '/else'}]Copy the code

(3) Route lazy loading

  • Lazy loading (on-demand loading) of routing components is realized through Vue’s asynchronous component and Webpack’s code splitting function.

    To reduce the loading time of the home page and optimize the user experience, use lazy loading to divide the page components and load the corresponding components only when they are in use

    const Home = () = > import('@/components/home')
const routes = [
    {
        path: '/home'.name: 'Home'.component: Home
    },
    {
        path: '/about'.name: 'About'.component: () = > import('@/components/about')}]Copy the code

  • (official) Grouping components into chunks: Grouping all components under the route into the same asynchronous chunk

    Webpack will combine any asynchronous module with the same block name into the same asynchronous block

    const Foo = () = > import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () = > import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () = > import(/* webpackChunkName: "group-foo" */ './Baz.vue')
Copy the code

(4) Routing meta informationmeta

  • When you define a route, each route can be configured with a META field in which you can set some custom information for use by page components or route hook functions

    const routes = [
    {
        path: '/home'.name: 'Home'.meta: {
            title: 'Home Page'}}, {path: '/about'.name: 'About'.meta: {
            title: 'About Page'}}]Copy the code

03. new VueRouterConfiguration items

(1)routes

  • Route configuration item

(2)mode

  • Mode for configuring routes. The default value is hash mode and the value can be history mode

    Differences (see Chapter 1 for detailed differences) :

    Hash mode: localhost:8080/#/user/list

    History mode: localhost:8080/user/list

    const router = new VueRouter({
    // Routing mode: Hash by default and history by default
    mode: 'history', 
    routes
})
Copy the code

(3)base

  • The base path used to configure the page, which defaults to /

    If the base path is configured, for example, base: /app/, the application service on the current page is in /app/

    At this point, accessing /app is the same as accessing /, because all requests automatically follow the URL with /app/

    const router = new VueRouter({
    // Can be configured according to the development environment...
    base: process.env.NODE_ENV === "production" ? "/app/" : "/",
    routes
})
Copy the code

(4)scrollBehavior

  • Used to control the scrolling behavior of a page after a jump

    const router = new Router({
    routes,
    scrollBehavior (to, from, savedPostion) {
        // to: indicates the route to go to. From: indicates the route from which the route originated
        // savedPosition is only available when using the browser's forward/back buttons
        if (savedPostion) {
            return savedPostion // return returns the desired scrolling position
        } else {
            return { x: 0.y: 0 } // Roll back to top}}})Copy the code

I front-end side dish chicken, if there is wrong, please forgive