本文将结合元素布局、样式继承、Flex弹性盒子等前端核心概念,深入剖析Vue路由的配置技巧与最佳实践,助你构建灵活高效的单页面应用。
目录
一、前端布局三大基石:元素类型解析
在构建页面之前,理解元素类型是前端开发的基础:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素类型解析</title>
<style>
/* 块级元素:独占一行,可以设置宽高 */
div{
background-color: red;
}
</style>
</head>
<body>
<!--
块级元素
独占一行,可以设置宽高
-->
<div>这是一个div标签 块级元素</div>
<!--
行内元素
并排展示,不可以设置宽高
-->
<!--
行内快元素
并排展示,但可以设置宽高
-->
</body>
</html>
关键特性对比:
元素类型 | 布局特点 | 宽高设置 | 典型代表 |
---|---|---|---|
块级元素 | 独占一行 | ✅ | <div> , <p> |
行内元素 | 并排展示 | ❌ | <span> , <a> |
行内块元素 | 并排且可设尺寸 | ✅ | <button> , <img> |
二、样式继承与Flex布局实践
1. 样式继承机制
子元素会继承父元素的某些样式属性(如字体、颜色):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式继承</title>
<style>
.con{
background-color: red;
width: 200px;
/* 子元素继承的样式属性 */
font-size: 16px;
color: #333;
}
/* .box{
background-color: blue;
} */
</style>
</head>
<body>
<div class="con">父容器
<div class="box">子元素</div>
</div>
</body>
</html>
可继承样式属性:
-
字体相关:
font-family
,font-size
,font-weight
-
文本相关:
color
,line-height
,text-align
-
列表相关:
list-style
,list-style-type
2. Flex弹性盒子布局
Flex布局是现代化响应式设计的核心解决方案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex弹性盒子</title>
<style>
.box{
width:800px;
height:800px;
border: 1px black solid;
/* 1.开启flex弹性盒子 */
display: flex;
/* 2.设置主轴方向 */
flex-direction: row;
/* 取反 flex-direction: row-reverse; */
/* 3.设置主轴的对齐方式 */
/* 组件间间距一样 */
justify-content: space-between;
/* 4.对应轴的对齐方式 */
align-items: center;
}
.item{
background-color: red;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border: 1px black solid;
}
.item:first-child{
margin-left: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="item">元素1</div>
<span class="item">span行内元素</span>
<a class="item">a标签</a>
<div class="item">元素3</div>
<div class="item">元素5</div>
</div>
</body>
</html>
lex布局核心属性:
-
flex-direction
:控制主轴方向(行/列) -
justify-content
:主轴对齐方式(space-between/around) -
align-items
:交叉轴对齐方式(center/flex-start)
三、Vue路由配置实战
1. 路由基础配置
// index.js
import Vue from 'vue'
import index from '@/views/index.vue'
import list from '@/views/list.vue'
import mine from '@/views/mine.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes:[
{
path:'/',
redirect:'/index', // 重定向到首页
},
{
path:'/index',
component:index,
},
{
path:'/list',
component:list,
// 二级路由配置
children:[
{
// path为空,作为默认子路由
path:'',
component:()=>import('@/views/list_phone.vue')
},
{
path:'/list/list_book',
component:()=>import('@/views/list_book.vue')
},
{
path:'/list/list_eat',
component:()=>import('@/views/list_eat.vue')
}
]
},
{
path:'/mine',
component:mine
},
{
// 动态传参配置
path:'/search/:word?', // ?表示可选参数
name:'search', // 命名路由
component:()=>import('@/views/search.vue')
},
{
path:'*', // 404通配符路由
component:()=>import('@/views/notFound.vue')
}
],
mode:'history' // 使用HTML5 History模式
})
export default router
2. 路由视图容器
在父组件中使用<router-view>
渲染子路由:
<!-- list.vue -->
<div class="con">
<div class="con_left">
<router-link to="/list">手机</router-link>
<router-link to="/list/list_book">书本</router-link>
</div>
<div class="con_right">
<router-view></router-view> <!-- 子路由渲染位置 -->
</div>
</div>
3. 路由导航样式控制
/* 精确匹配时的活动链接样式 */
.con_left a.router-link-exact-active {
background-color: #d0d0d0;
color: #fff;
}
四、路由传参的两种核心方式
1. Query传参(URL可见)
<!-- index.vue -->
<template>
<router-link to="/search?tit=查询传参">跳转搜索</router-link>
<button @click="toSearch">编程式导航</button>
</template>
<script>
export default {
methods: {
toSearch() {
this.$router.push({
path: "/search",
query: { tit: '大学城' } // 通过query传递
})
}
}
}
</script>
<!-- search.vue -->
<template>
<p>接收参数:{{ $route.query.tit }}</p>
</template>
2. Params传参(更简洁的URL)
// 路由配置
{
path: '/search/:word?', // ?表示可选参数
name: 'search',
component: () => import('@/views/search.vue')
}
<!-- index.vue -->
<script>
export default {
methods: {
toSearch() {
this.$router.push({
name: "search", // 使用命名路由
params: { word: '动态参数' }
})
}
}
}
</script>
<!-- search.vue -->
<template>
<p>接收参数:{{ $route.params.word }}</p>
</template>
五、路由实战技巧与最佳实践
路由懒加载:提升首屏加载速度
component: () => import('@/views/list.vue')
动态路径参数验证:
{
path: '/user/:id',
component: User,
props: route => ({ id: Number(route.params.id) }) // 转换为数字
}
导航守卫控制:
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})
滚动行为控制:
const router = new VueRouter({
scrollBehavior(to, from, savedPosition) {
return savedPosition || { x: 0, y: 0 }
}
})
六、嵌套路由实战
1. 二级路由组件
<!-- list_eat.vue -->
<template>
<div>
<p>foods</p>
</div>
</template>
<!-- list_book.vue -->
<template>
<div>
<p>book</p>
</div>
</template>
2. 嵌套路由配置要点
{
path:'/list',
component:list,
children:[
{
path:'', // 默认子路由
component:()=>import('@/views/list_phone.vue')
},
{
path:'/list/list_book', // 完整路径
component:()=>import('@/views/list_book.vue')
}
]
}
七、项目结构推荐
src/
├── router/
│ └── index.js # 路由配置中心
├── views/ # 路由级组件
│ ├── index.vue
│ ├── list.vue
│ └── search.vue
├── components/ # 可复用组件
└── App.vue # 根组件
总结
本文深入探讨了Vue路由从基础配置到高级应用的全流程,结合前端布局核心概念,呈现了:
-
元素类型与Flex布局的现代解决方案
-
Vue路由配置的完整实现方案
-
Query/Params传参的实战应用场景
-
嵌套路由与布局组件的深度集成
-
路由懒加载、导航守卫等进阶技巧
技术不会止步,路由方案也在不断演进。建议持续关注Vue Router的最新特性,如组合式API支持、路由预加载优化等,保持技术栈的先进性。