2024年最全前端框架学习之Vue 4(1)，大厂面试技巧

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

**1.引入相关的库文件**

**2.添加路由链接**

User Register

**3.添加路由填充位**

**4.定义路由组件**

		const User={
			template:'<h1>User</h1>'
		}
		const Register={
			template:'<h1>Register</h1>'
		}

**5.配置路由规则并创建路由实例**

		//创建路由实例对象
		var router=new VueRouter({
			routes:[  //routes 路由规则数组
				{path:'/user',component:User},  //path 当前路由匹配的hash地址
				{path:'/register',component:Register} //component 表示当前路由规则对应要展示的组件
			]
		})

**6.把路由实例挂载到Vue实例中**

		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			router:router //挂载路由实例对象
		})

一个完整的vue-router案例

User Register

	<script>
		/**
		 * 创建路由组件
		 */
		const User={
			template:'<h1>User</h1>'
		}
		const Register={
			template:'<h1>Register</h1>'
		}
		//创建路由实例对象
		var router=new VueRouter({
			routes:[  //routes 路由规则数组
				{path:'/user',component:User},  //path 当前路由匹配的hash地址
				{path:'/register',component:Register} //component 表示当前路由规则对应要展示的组件
			]
		})
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			router:router //挂载路由实例对象
		})
	</script>
</body>

##### 4.路由重定向


**redirect**：重定向至目标组件

		var router=new VueRouter({
			routes:[  //routes 路由规则数组
				{path:'/',redirect:'/user'}
				{path:'/user',component:User},  //path 当前路由匹配的hash地址
				{path:'/register',component:Register} //component 表示当前路由规则对应要展示的组件
			]
		})

##### 5.嵌套路由


父路由之中包含子路由，实现路由嵌套

1.在父组件之中，添加路由链接，路由占位符
const Register={
template:`

Register组件

---

				<!--子路由链接 -->
				<router-link to="/register/tab1">tab1</router-link>
				<router-link to="/register/tab2">tab2</router-link>
				
				<!--子路由占位符-->
				<router-view></router-view>
			</div>
			`
		}

2.创建子路由的组件
const Tab1={
template:‘

tab1 View

’
}
const Tab2={
template:‘

tab2 View

’
}
3.在对应的父路由中添加children属性来实现子路由的匹配
var router=new VueRouter({
routes:[
{path:‘/’,redirect:‘/user’},
{path:‘/user’,component:User},
{path:‘/register’,component:Register,
children:[
{path:‘/register/tab1’,component:Tab1},
{path:‘/register/tab2’,component:Tab2}
]}
]
})

##### 6.动态路由匹配


通过动态路由的参数进行路由匹配

		<router-link to="/user/1">User1</router-link>
		<router-link to="/user/2">User2</router-link>
		<router-link to="/user/3">User3</router-link>
		//定义参数
		{path:'/user/:id',component:User},
		//$route.params 可以获取到参数 但是不够灵活
		template:'<h1>User{{$route.params.id}}</h1>'

**路由组件传递参数**


props为布尔类型

//如果props被设置为true，route.params将会被设置为组件属性
routes:[
{path:‘/user/:id’,component:User,props:true}
]
const User={
props:[‘id’], //使用props接收路由参数
template:‘

User id:{{id}}

’ //使用路由参数
}

props为对象类型

{path:‘/user/:id’,component:User,props:{uname:‘Lvan’,age:12}},
const User={
props:[‘uname’,‘age’],
template:‘

User age:{{age}}

’
}

props函数类型，使用route传递参数

{path:‘/user/:id’,component:User,props:route=>({uname:‘Lvan’,age:12,id:route.params.id})},

const User={
props:[‘uname’,‘age’,‘id’],
template:‘

User id:{{id}} age:{{age}}

’
}

##### 7.命名路由


为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为 ‘命名路由’

			{
					path: '/user/:id',
					name: 'user',
					component: User,
					props:route=>({id:route.params.id})
				}
				
			<router-link :to="{name:'user',params: { id:143}}">命名路由User</router-link>

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包