Vue-router多级路由基本操作(合理解决多个嵌套的公共页面)
Vue-router多级目录基本操作前言一、操作步骤1.router配置2.router-view使用总结前言最近在项目中遇到了一个新需求,虽然通过router一级路由也可以实现最终效果,但会导致代码冗余过多,不利于模块化,由此决定学习并使用Vue-router多级目录一、操作步骤1.router配置首先,我们要在项目中建立router文件夹,并在里面创建好index.js,以博主的需求举例子,项
Vue-router多级目录基本操作
前言
最近在项目中遇到了一个新需求,虽然通过router一级路由也可以实现最终效果,但会导致代码冗余过多,不利于模块化,由此决定学习并使用Vue-router多级目录
一、操作步骤
1.router配置
首先,我们要在项目中建立router文件夹,并在里面创建好index.js,以博主的需求举例子,项目里有两个一级目录,登录和展示,展示页下有三个小目录
以下就是博主的index.js配置,在一级目录下使用children属性,将二级目录放入所属的父路由中,路由访问的路径和根据自己的项目变化
import {createRouter, createWebHashHistory} from "vue-router";
// 路由信息
const routes = [
{
path: "/index",
name: "Index",
component: () => import('../views/Main.vue'),
children:[
{
path: "Home",
name: "Home",
component: () => import('../views/Home/Index.vue'),
},
{
path: "Environment",
name: "Environment",
component: () => import('../views/Environment/Index.vue'),
},
{
path: "Internation",
name: "Internation",
component: () => import('../views/Internation/Index.vue'),
},
],
},
{
path: "/Login",
name: "Login",
component: () => import('../views/Login.vue'),
}
];
// 导出路由
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
2.router-view使用
博主把一级目录使用的router-view放在App.vue里,这样可以将登陆页和展示页分割开
接下来把二级目录使用的router-view放在父路由对应的组件内,博主二级目录的router-view就放在了index路由对应的Main.vue组件里,这样就可以确保公共资源的复用性,不会存在代码冗余,比如我们需要访问展示页下的首页,我们需要访问的路径应该是项目路径+index/Home,因为我们在children里面配置的path并没有添加/,如果我们在children的路径里添加/,比如path:"/Home",我们就可以直接访问项目路径+/Home
总结
上述内容如果存在问题,欢迎大家批评指正!!!
更多推荐
所有评论(0)