vue3.0 路由隐藏地址栏
vue3.0 路由隐藏地址栏,VUE hash路由和history路由的区别。
·
文章目录
声明一下:这是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;
更多推荐
已为社区贡献2条内容
所有评论(0)