Three differences between route, routes, and router

Routing has three basic concepts route, routes, router:

•  route, it is a route, as can be seen from the English word, it is singular, Home button => home content, this is a route, about button => about content, this is another route.
• routes is a group of routes, combining each of the above routes to form an array. [{home button => home content}, { about button => about content}]
• router is a mechanism, equivalent to a manager, which manages routing. Because routes only define a set of routes, where it is placed is static, what should we do when a request actually comes? What should I do when the user clicks the home button? At this time, the router works. It searches the routes to find the corresponding home content, so the home content is displayed on the page.

1. route

route: a route

{
    name: 'ion-home',
	path: '/ion-home',
	component: () => import('@/pages/ion-home/ion-home.vue')
}

Two, routes

routes: composed of multiple routes

const routes = [
    {
        name: 'ion-home',
	    path: '/ion-home',
	    component: () => import('@/pages/ion-home/ion-home.vue')
    },
    {
        name: 'ion-home',
	    path: '/ion-home',
	    component: () => import('@/pages/ion-home/ion-home.vue')
    },
]

Three, router

router: Manage routes, created by the constructor new vueRouter(), accepting the routes parameter

router.js

method one,

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
      routes: routes // routes: routes 的简写
})
export default router

Method two,

import { createRouter, createWebHashHistory } from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
    history: createWebHashHistory(), //除了 createWebHashHistory，还有 createWebHistory 和 createMemoryHistory
    routes
})

export default router

main.js

import router from './router'

const app = new Vue({
  router
}).$mount('#app')