路由有三个基本概念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')