Router 範例

// Router 用法
function backtoindex () {
  router.push('/home/pushmsg')
}

Router 模式

Hash 模式：如果你的路由使用 hash 模式（例如 Vue Router 的默认模式），那么路由前面会加 #。这在 URL 中的格式是 http://example.com/#/route。

这个模式的优点是可以在不配置服务器的情况下使用，因为它不会向服务器发送请求。

History 模式：如果使用的是 history 模式，URL 中则不会包含 #，而是以 http://example.com/route 的形式出现。这个模式需要服务器支持，以便在用户刷新页面时正确处理路由。

可以根据你的需求选择合适的模式。如果没有特别要求，hash 模式通常是更简单的选择。

---

下面是一个简单的 router.beforeEach 示例，展示如何使用 Vue Router 的导航守卫来处理路由访问权限。

在这个例子中，我们将确保用户在访问特定页面之前已经登录。

javascript

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

// 定义路由
const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue'),
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true } // 需要身份验证
  },
  {
    path: '/:pathMatch(.*)*', // 404 页面
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue'),
  }
];

// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 如果目标路由需要身份验证
  if (to.meta.requiresAuth) {
    const isLoggedIn = !!localStorage.getItem('user'); // 检查用户是否登录
    if (!isLoggedIn) {
      return next('/login'); // 未登录，重定向到登录页面
    }
  }
  next(); // 允许访问目标路由
});

// 导出路由实例
export default router;

---

Router 觀念

Router ，最終就只是指向一個 vue 而己

/home/system ，只是指向 require(@/view/systemConfig/index.vue))

path: "/home",
name: "home",
component: () => require.ensure([], (require) => require(`@/view/home.vue`)),
children: [{
        name: "index",
        path: "index",
        permission: "teacher-read|teacher-upd",
        roles: ['all'],
        isShow: true,
        component: () => require.ensure([], (require) => require(`@/view/index/index.vue`))
    },
    //系统配置
    {
        name: "system",
        path: "system",
        permission: "batcharea-read|batcharea-upd|batchschool-read|batchschool-upd",
        roles: ['admin'],
        isShow: true,
        component: () => require.ensure([], (require) => require(`@/view/systemConfig/index.vue`))
    },