Vue3配置路由

1. 安装

  

    ```bash
    cnpm i vue-router@4 -S
    ```

2.新建路由配置文件
    // router/index.js

import { createRouter, createWebHashHistory } from 'vue-router';
    
    const router = createRouter({
      history: createWebHashHistory(),
      routes: [
        {
          path: '/',
          redirect: '/home', 
        },
        {
          path: '/home',
          component: () => import('../pages/MyHome'),
        },
        {
          path: '/cart',
          component: () => import('../pages/MyCart'),
        },
        {
          path: '/me',
          component: () => import('../pages/MyMessage'),
        },
        {
          path: '/order',
          component: () => import('../pages/MyOrder'),
        },
      ],
    });
    
    export default router;

3. 引入

- 引入

    ```js
    // main.js
    import router from './router/index';
    
    const app = createApp(App);
    app.use(router);
    app.mount('#app');
    ```

4. 使用

- 使用

  ```vue
  // App.vue
  <router-view></router-view>
  ```

  ```vue
  // Footer.vue
  <div><router-link to="/home">首页</router-link></div>
  <div><router-link to="/cart">购物车</router-link></div>
  <div><router-link to="/order">订单</router-link></div>
  <div><router-link to="/mine">我的</router-link></div>
  ```