For a long time… Previously, we embarked on the Vue-Admin-Pro journey. Through the back-end management system development (a) : login, login function, we opened the door of the background management system. This section is the explanation of routing, no matter how simple the management system is, it is necessary to learn this section. But for us, routing is the menu.

Now we begin this section – routing chapter learning journey.

1 basis

I’m sure most of the people reading this article are backend developers, some of whom may or may not have learned Vue, so let’s take a look at routing.

If you want to learn more, see: Vue Router.

1.1 the routing

A route is a jump.

Declarative:

Programming: router.push(…)

1.2 the router. Push

The following is an example:

/ / string
router.push('home')

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

// Named route
router.push({ name: 'user'.params: { userId: '123' }})
router.push({ path: `/user/${userId}` }) // -> /user/123

// With query parameters, change to /register? plan=private
router.push({ path: 'register'.query: { plan: 'private' }})
Copy the code

Router. Replace does not add new records to history =

1.3 the router. The go (n)

How many steps back is window.history.go(n).

The following is an example:

// Further forward in the browser record, equivalent to history.forward()
router.go(1)

// Step back to record, equivalent to history.back()
router.go(-1)

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

// If history is not enough, fail silently
router.go(-100)
router.go(100)
Copy the code

1.4 Naming Routes

router.push({ name: 'user'.params: { userId: 123}})Copy the code

1.5 the redirection

Redirection is also done using the Routes configuration. Here is an example of redirection from /a to /b:

const router = new VueRouter({
  routes: [{path: '/a'.redirect: '/b'}]})Copy the code

The redirection target can also be a named route:

const router = new VueRouter({
  routes: [{path: '/a'.redirect: { name: 'foo'}}}])Copy the code

Or even a method that dynamically returns a redirected target:

const router = new VueRouter({
  routes: [{path: '/a'.redirect: to= > {
      // The method receives the destination route as an argument
      // Return redirects the string path/path object}}}])Copy the code

Note that the navigational guard is not applied to the jump route, but only to its target. In the following example, adding a beforeEnter guard for the/A route has no effect.

Alias:

const router = new VueRouter({
  routes: [{path: '/a'.component: A, alias: '/b'}]})Copy the code

1.6 Route Parameter Transmission

1.6.1 Sending Parameters through path

The parameters are displayed in the URL, the page is refreshed, and the data is not lost.

The routing configuration

{
  path: '/particulars/:id'.name: 'particulars'.component: particulars
}
Copy the code

Passing parameters

// Call $router.push directly to jump with parameters
this.$router.push({
  path: `/particulars/${id}`,})Copy the code

Receive parameters

this.$route.params.id
Copy the code

1.6.2 Uploading Parameters through Params

Parameters are not displayed on the URL

The page is refreshed and the data is lost

The routing configuration

{
  path: '/particulars'.name: 'particulars'.component: particulars
}
Copy the code

Passing parameters

this.$router.push({
  name: 'particulars'.params: {
    id: id
  }
})
Copy the code

Receive parameters

this.$route.params.id
Copy the code

1.6.3 Sending parameters through Query

You match the route with path, and then you pass the parameters through Query in which case the parameters that query passes are displayed after the URL, right? Id =?

The routing configuration

{
  path: '/particulars'.name: 'particulars'.component: particulars
}
Copy the code

Passing parameters

this.$router.push({
  path: '/particulars'.query: {
    id: id
  }
})
Copy the code

Receive parameters

this.$route.query.id
Copy the code

1.7 Complete navigation parsing process

  1. Navigation is triggered.
  2. Called in a deactivated componentbeforeRouteLeaveThe guards.
  3. Call globalbeforeEachThe guards.
  4. Called in a reused componentbeforeRouteUpdateGuard (+ 2.2).
  5. Called in the routing configurationbeforeEnter.
  6. Parse the asynchronous routing component.
  7. Called in the active componentbeforeRouteEnter.
  8. Call globalbeforeResolveGuard (+ 2.5).
  9. Navigation confirmed.
  10. Call globalafterEachHook.
  11. Trigger a DOM update.
  12. callbeforeRouteEnterGuard passnextThe created component instance is passed in as an argument to the callback function.

2 Directory Structure

. └ ─ ─ the SRC └ ─ ─ the router / / routing ├ ─ ─ before - close. Js / / page close needs to be done before the operation, write here ├ ─ ─ index. The js / / routing policy └ ─ ─ routers. Js / / routing configurationCopy the code

3 tag

path

Road king

name

The name

meta

Page information configuration, which is an object

title

The title

hideInMenu

Whether to hide in menu, Boolean, true: hide; False: Display. Default: Display.

component

component

notCache

Don’t cache

icon

icon

hideInBread

If set to true, this route will not appear in the breadcrumbs

redirect

jump

4 icon

You can go here to filter the ICONS you want

If our requirements are not met, you can customize the icon.

To customize an icon, add an underscore (_) before the icon name.

There will be a separate section for custom ICONS.

More than 5 languages

If your system is going to support multiple languages, you need to enable multiple languages first.

1: Enable multi-language support in the./ SRC /config/index.js configuration file: useI18n=true.

2: Multilingual files are stored in the./ SRC /local directory.

Six separate pages

export default[{path: '/login'.name: 'login'.meta: {
      title: 'Login - Login '.hideInMenu: true
    },
    component: () = > import('@/view/Login/Login')}]Copy the code

7 Level-1 Menu

export default[{path: '/tools_methods'.name: 'tools_methods'.meta: {
      hideInBread: true
    },
    component: Main,
    children: [{path: 'tools_methods_page'.name: 'tools_methods_page'.meta: {
          icon: 'ios-hammer'.title: 'Tool method'.beforeCloseName: 'before_close_normal'
        },
        component: () = > import('@/view/tools-methods/tools-methods.vue'}]},]Copy the code

8 Second-level Menu

export default[{path: '/components'.name: 'components'.meta: {
      icon: 'logo-buffer'.title: 'components'
    },
    component: Main,
    children: [{path: 'tree_select_page'.name: 'tree_select_page'.meta: {
          icon: 'md-arrow-dropdown-circle'.title: 'Tree drop-down selector'
        },
        component: () = > import('@/view/components/tree-select/index.vue')}, {path: 'count_to_page'.name: 'count_to_page'.meta: {
          icon: 'md-trending-up'.title: 'Digital gradient'
        },
        component: () = > import('@/view/components/count-to/count-to.vue'}]}]Copy the code

Examples of effects:

9 Multi-level Menu

export default[{path: '/multilevel'.name: 'multilevel'.meta: {
      icon: 'md-menu'.title: 'Multi-level menu'
    },
    component: Main,
    children: [{path: 'level_2_1'.name: 'level_2_1'.meta: {
          icon: 'md-funnel'.title: Level 2-1 '
        },
        component: () = > import('@/view/multilevel/level-2-1.vue')}, {path: 'level_2_2'.name: 'level_2_2'.meta: {
          access: ['super_admin'].icon: 'md-funnel'.showAlways: true.title: Level 2-2 '
        },
        component: parentView,
        children: [{path: 'level_2_2_1'.name: 'level_2_2_1'.meta: {
              icon: 'md-funnel'.title: '3'
            },
            component: () = > import('@/view/multilevel/level-2-2/level-2-2-1.vue')}, {path: 'level_2_2_2'.name: 'level_2_2_2'.meta: {
              icon: 'md-funnel'.title: '3'
            },
            component: () = > import('@/view/multilevel/level-2-2/level-2-2-2.vue'}]}, {path: 'level_2_3'.name: 'level_2_3'.meta: {
          icon: 'md-funnel'.title: Level 2-3 '
        },
        component: () = > import('@/view/multilevel/level-2-3.vue'}]}]Copy the code

Examples of effects: