vue3.0 路由隐藏地址栏

声明一下：这是vue3.0的写法。vue2的写法应该是类似的。
History路由和Hash路由的区别： 传送门
下面写的区别只是最简要的能分辨的区别。

一、History路由

createWebHistory（不带 # 符号，也不隐藏地址栏）

import { createRouter, createMemoryHistory } from "vue-router";
...
const router = createRouter({
  history: createWebHistory(),//history路由
  routes, // `routes: routes` 的缩写
});
export default router;

createMemoryHistory（隐藏地址栏）

import { createRouter, createMemoryHistory } from "vue-router";
...
const router = createRouter({
  history: createMemoryHistory(),//隐藏路由
  routes, 
});
export default router;

二、Hash路由

createWebHashHistory（地址栏带 # 符号）

import { createRouter, createWebHashHistory } from 'vue-router'
...
const router = createRouter({
  history: createWebHashHistory(),//Hash路由
  routes
})
export default router

下面有路由的完整写法:

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from "../layout/Layout";
import Login from "@/views/login/index";
const routes = [
  // { path: "", redirect: "/login" },
  { path: "/login", component: Login},
  {
    path: "/",
    name: "LayOut",
    component: Layout,
    redirect: "/home",
    children: [
      {
        path: "home",
        name: "home",
        component: () => import("@/views/home/index"),//路由懒加载
        meta: { title: "首页" , navnum: '1' },
      },
    ],
  },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router;