route、routes、router三个区别

路由有三个基本概念route、routes、router:

•  route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮  => home内容， 这是一条route,  about按钮 => about 内容， 这是另一条路由。
• routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
• router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

一、route

route：一条路由

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

二、routes

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')
    },
]

三、router

router: 对路由进行管理，由构造函数 new vueRouter() 创建，接受routes 参数

router.js

方式一、

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

方式二、

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')