Vue3+vue-router前端路由基本配置

记录前端路由配置

注意点

• App.vue 页面： 设置一个全局的的路由,前端的登录页面以及主页面框架

<template>
  <router-view></router-view>
</template>

• MainLayout.vue 主页面

<template>
  <div>
    <header-component />
    <side-nav-component />
    <router-view /> // 这里是私有页面展示的地方
  </div>
</template>

<script>
import HeaderComponent from './HeaderComponent.vue';
import SideNavComponent from './SideNavComponent.vue';

export default {
  components: {
    HeaderComponent,
    SideNavComponent
  }
}
</script>

• index.js 路由配置

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import MainLayout from '@/layouts/MainLayout.vue';
import userRouter from './modules/userRouter';
import homeRouter from './modules/homeRouter';
import LoginRouter from './modules/LoginRouter'

Vue.use(Router);

const routes = [
  {
    path: '/',
    component: MainLayout,
    children: [
    // 私有路由
      ...userRouter,
      ...homeRouter,
    ]
  },
  {
    path: '/login',
    component: LoginRouter,
  },
];

const router = new Router({
  mode: 'history',
  routes
});

export default router;

写法说明

• App页面写的一个 <router-view /> 是为了处理 主页面 Layout和登陆页面之间在路由中的展示，这样可以不判断头部或者侧边是否展示
• index.js 路由配置 将私有路由放到根路径的children下，这样可以避免在切换路由的时候导致，侧边导航以及头部导航消失