vue3 引入 router 模块

目录

准备

main.js  添加内容

新建 src/views目录  里面放置  vue页面

src/router  目录结构创建

index.js 

defaultIndex.js 

其它 相关连接

---

准备

添加依赖包

yarn add vue-router@next vuex@next

此时 vue-router  和  vuex 都已经添加

main.js  添加内容

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(router);
app.use(ElementPlus);
app.mount('#app')

新建 src/views目录  里面放置  vue页面

src/views/

        Home/index.vue

        Login/

                login.vue

                register.vue

        menu/

                menu1.vue

                menu2.vue

                menu3.vue

页面内容 随便 先添加一些

<template>

  <div>

    this is XXX page

  </div>

</template>

<script setup >

</script>

<style ></style>

src/router  目录结构创建

src/router

        index.js

        defaultIndex.js

index.js 

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

import defaultIndex from '@/router/defaultIndex';

export const router = createRouter({

  history: createWebHashHistory(),

  routes: defaultIndex,

});

 

// 导出路由

export default router;

defaultIndex.js 

export default [

  {

    path: "/",

    redirect: "/home",

    component: () => import(/* webpackChunkName: "login" */ '@/layout'),

    children: [

      {

        path: '/home',

        name: 'home',

        component: () => import('@/views/Home/index.vue'),

        meta: {

          role: 'common',

          title: 'home'

        }

      },

      // articles route

      {

        path: '/menu1',

        name: 'menu1',

        component: () => import('@/views/menu/menu1.vue'),

        meta: {

          role: 'common',

          title: 'menu1'

        }

      },

      {

        path: '/menu2',

        name: 'menu2',

        component: () => import('@/views/menu/menu2.vue'),

        meta: {

          role: 'common',

          title: 'menu2'

        }

      },

      {

        path: '/menu3',

        name: 'menu3',

        component: () => import('@/views/menu/menu3.vue'),

        meta: {

          role: 'common',

          title: 'menu3'

        }

      },

     

    ],

  },

  {

    path: '/login',

    name: 'login',

    component: () => import('@/views/login/login.vue'),

    meta: {

      role: 'common',

      title: 'login'

    }

  },

  {

    path: '/register',

    name: 'register',

    component: () => import('@/views/login/register.vue'),

    meta: {

      role: 'common',

      title: 'register'

    }

  },

]

 此时路由就已经写好了见下一章 

其它 相关连接

Layout 布局 菜单路由跳转：vue3 layout 布局 设置_xhc6666的博客-CSDN博客

进阶版： 路由守卫，拦截器：