前端路由介绍

Router

一、介绍图片

二、解释：

将router路由看为路由器：

电脑想要上网，需要通过网线将电脑和路由器连接，然后将路由器连接到网线插口上，自此，你的电脑就可以上外网了。

路由是vue全家桶里比较重要的一部分。

下面我将用电脑通过路由器的方式上网的方式进行尝试讲解：

1、将路由器和网线插口连接

//main.js/ts
import { createApp } from 'vue'
import App from './App.vue'
// 将路由器连接网口的线拿到网线口旁边（在main.js/ts中引入router配置）
import router from "@/router";
​
const app = createApp(App);
// 将网线插入网口（将配置挂载到main.js/ts中）
app.use(router);
app.mount('#app');

2、将配置路由器，并连接电脑

// router/index.js/ts
// 在浏览器中输入路由器后台地址（引入路由配置器）
import { createRouter,createWebHistory} from "vue-router"
// 连接配置（配置路由）
const routes = [
    {
        // 配置默认拨号（默认地址）
        path:'/',
        // 拨号地址（重定向）
        redirect: 'home'
    },
    {
        // 将连接路由器和第一台电脑的网线拿过来
        // 将连接路由器的网线头插入路由器并配置固定的IP地址（配置路由地址）
        path:'/home',
        // 将连接第一台电脑的网线头插入第一台电脑
        component: () => import('@/pages/homePage.vue')
    },
    {
        // 将连接路由器和第二台电脑的网线拿过来
        // 将连接路由器的网线头插入路由器，并配置固定的IP地址（配置路由地址）
        path: '/about',
        // 将连接第二台电脑的网线头插入的二台电脑
        component: () => import('@/pages/aboutPage.vue')
    }
]
​
// 配置完毕，修改一下配置名（创建路由配置）
const router = createRouter({
    history: createWebHistory(),  //开启回退模式（开启history模式）
    routes
});
// 抛出路由
export default router;

3、到这里，路由配置就结束了。