Routing design and page level design in the Vue project are very important parts of development. Designing these two aspects can effectively reduce the problems of deep page nesting and covering, and improve user experience and development efficiency. In the next blog, we will explore these two aspects from three perspectives: inspection point, technical solution (code example) and summary.
1. Inspection points
When designing routing and page levels in a Vue project, the following issues need to be considered:
Is the page level nesting too deep, will it affect the user experience?
How to avoid the problem that the components in the pop-up window cover each other?
How to ensure that the routing design is reasonable, easy to maintain and expand?
2. Technical solution
To solve the above problems, we can adopt the following technical solutions:
routing design
The routing design in the Vue project needs to follow the following principles:
Use nested routing: minimize the problem of deep nesting of the page level, and convert the nested relationship into nested routing; design a
reasonable routing structure: divide routes according to business functions or modules, and design the routing structure reasonably to facilitate maintenance and expansion; use lazy loading of routes: use lazy loading of routes to speed up page loading and improve user experience; routing interception:
through the routing interception
mechanism, functions such as authority control and login verification can be realized.
Here is the sample code:
Create a new index.js file in the router folder for routing configuration
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [{
path: '/',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
component: () => import('@/views/About.vue')
},
{
path: '/user/',
component: () => import('@/views/user/Index.vue'),
children: [{
path: '',
component: () => import('@/views/user/List.vue')
},
{
path: 'profile',
component: () => import('@/views/user/Profile.vue')
},
{
path: 'setting',
component: () => import('@/views/user/Setting.vue')
}
]
}
]
})
// 路由拦截
router.beforeEach((to, from, next) => {
// 登录验证
if (to.path.startsWith('/user') && !sessionStorage.getItem('token')) {
next('/')
} else {
next()
}
})
export default router
page hierarchy design
The page hierarchy design needs to follow the following principles:
Try to avoid setting the level by z-index, and you can solve the level problem by adjusting the position of the component in the DOM tree; the
absolute positioning layout is used inside the pop-up window component to ensure that its internal components are positioned relative to the pop-up window;
using the portal technology in Vue, the component can be inserted into the specified DOM tree node for rendering.
Here is the sample code:
Page level design in App.vue file
<template>
<div id="app">
<!-- 网站头部 -->
<Header />
<!-- 应用主体区域 -->
<main>
<!-- 路由视图 -->
<router-view />
<!-- 弹窗组件 -->
<Dialog :visible="dialogVisible">
<component :is="dialogComponent" />
</Dialog>
</main>
<!-- 网站底部 -->
<Footer />
<!-- 将弹窗组件插入到body节点中方便渲染 -->
<portal to="body">
<div id="dialog"></div>
</portal>
</div>
</template>
<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Dialog from "@/components/Dialog";
export default {
name: "App",
components: {
Header,
Footer,
Dialog
},
data() {
return {
dialogVisible: false,
dialogComponent: null
};
},
methods: {
showDialog(component) {
this.dialogComponent = component;
this.dialogVisible = true;
},
hideDialog() {
this.dialogVisible = false;
this.dialogComponent = null;
}
}
};
</script>
3. Summary
Routing design and page level design are very important parts of Vue project development. Designing these two aspects can effectively reduce the problems of deep page nesting and covering, and improve user experience and development efficiency. We can use technical solutions such as nested routing, lazy loading of routing, and routing interception to solve routing design problems; use portal technology in Vue, absolute positioning layout inside pop-up components and other solutions to solve page-level design problems. Hope this blog is helpful to you.