前端资料汇总
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。
首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。
更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点:和什么人、做什么事、给多少钱,要给这三者在自己的心里划分一个比例。
最后,祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。
// this.$router.push('/home')//祖父串的方式进行跳转
// this.$router.push({path:'/home'})//以对象的方式跳转
this.$router.replace('/home')//replace没历史记录
},
toUser(){
//去用户
this.$router.push('/user/'+this.user2)
}
},
}
#### user.vue组件
用户组件
欢迎 {{uname}} 来到用户页面
//输出一或二切换输出名字:{{$route.params.id}}
嵌套路由
页面中使用this.$route:获取活跃的组件;
this.$router:获取router整个路由
//配置路由的相关信息
import Vue from 'vue'
import Router from 'vue-router'
// 1.通过vue.use安装插件
Vue.use(Router);
// 引用组件
import Home from '../components/Home.vue'
import User from '../components/User.vue'
import News from '../components/News.vue'
import Msg from '../components/Msg.vue'
// 配置路由和组件之间的引用关系
const routes =[
{
path:'/',
// 重定向redirect
redirect:'/home'
},
{
path:'/home',
component:Home ,
// 使用嵌套路由用children属性
children:[
{
path:'/home',
redirect:'/home/news'
},
{//子路由加斜杠会被当作根路径
path:'news',
component:News
},
{
path:'msg',
component:Msg
},
]
},
{
path:'/user/:id',
component:User
},
]
// 创建vue-router对象
const router = new Router({
routes,
// 没历史
mode:'history',
linkActiveClass:'active'
})
// 3.把router导出给vue实例
export default router
// $route:指向活跃的组件
// $router:指向router整个路由
路由传参,懒加载
router的index.js
/配置路由的相关信息
import Vue from 'vue'
import Router from 'vue-router'
// 1.通过vue.use安装插件
Vue.use(Router);
// 懒加载
const User = ()=> import('../views/User.vue')
const Info = ()=> import('../views/info.vue')
const routes =[
// {
// path:'/home',
// name:'Home',//命名路由
// component:Home
// },
{
// 配置动态路由
path:'/user/:id',
name:'User',
// 懒加载
component:User
},
{
path:'/info',
name:'Info',
component:Info
},
]
const router = new Router({
routes,
// 没历史
mode:'history',
// linkActiveClass:'active'
})
// 3.把router导出给vue实例
export default router
Info组件
<template>
<div id="info">
<h2>这是信息组件</h2>
//$route接收参数
<h3>姓名:{{$route.query.name}}</h3>
<h3>年龄:{{$route.query.age}}</h3>
</div>
</template>
User组件
<template>
<div id="user">
<h2>用户信息</h2>
<!-- 取值用$route -->
//页面中有两个params.id,点击谁就显示哪个id
<h3>用户编号{{$route.params.id}}</h3>
</div>
</template>
App.vue
<template>
<div id="app">
<router-link to="/user/2021">user</router-link>|
<router-link to="/info">info</router-link>
<!-- 编程式导航 -->
<button @click="toUser">user</button>
<hr />
<!-- 用path -->
<!-- <router-link :to="{path:'/user/'+userId}">user--path</router-link><br> -->
<!-- 用name,params传参 -->
<router-link :to="{name:'User',params:{id:userId}}">user--name</router-link>
<div>
<!-- 通过query传参, /info?name=rh&age=22&sex=男 -->
<router-link :to="{path:'/info',query:{name:'rh',age:22,sex:'男'}}">info-path</router-link>
<!-- 编程式导航,/info?name=有意&age=22 -->
<button @click="toInfo">info</button>
</div>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
userId: '20211',
};
},
methods: {
// 路由传参:
// query和path配合
// params和name配合
// name:命名路由
toUser() {
// params传参
this.$router.push({ name: "User", params: { id: "567" } });
},
toInfo(){
// 没历史记录
//$router传参
this.$router.replace({name:'Info',
query:{
name:'有意',
age:22,
}})
}
},
};
</script>
守卫钩子(全局+独享+组件内的守卫)
登录页
<template>
<div id="login">
<h3>登录</h3>
账号:<input type="text" name="" id="" v-model="userName" />
密码:<input
type="text"
v-model="userPass"
/>
<button @click="login">登录</button>
</div>
</template>
<script>
export default {
data() {
return {
userName: "",
userPass: "",
};
},
methods: {
login() {
// 通过window对象给uname和upass赋值;
var name = window.uname = "admin";
var pass = window.upass = "123";
if (this.userName == name && this.userPass == pass) {
alert("登录成功");
// 放行后跳转到首页
this.$router.replace("/");
}else{
alert('账号不对')
}
},
},
};
</script>
路由
//配置路由的相关信息
import Vue from 'vue'
import Router from 'vue-router'
// 1.通过vue.use安装插件
Vue.use(Router);
// 懒加载
const User = ()=> import('../views/User.vue')
const Info = ()=> import('../views/info.vue')
const Login = ()=> import('../views/Login.vue')
const routes =[
{
// 配置动态路由
path:'/user/:id',
name:'User',
// 懒加载
component:User,
// 独享路由守卫
beforeEnter(to, from, next){
next()
}
},
{
path:'/info',
name:'Info',
component:Info
},
{
path:'/Login',
name:'Login',
component:Login
},
]
const router = new Router({
routes,
// 没历史
mode:'history',
// linkActiveClass:'active'
})
// 全局前置钩子:beforeEach
// 在进入前做一些事
// to:要去的路由
// from:来的路由
// next:放行,默认参数是false
//上面把账号密码放到window这里也可以访问到
router.beforeEach((to,from,next)=>{
if(to.name !=='Login'){//验证是否登录
if(window.uname && window.upass){
next();
}else{
alert('请先登录')
next('/Login')
}
}
next();
})
// 全局的后置
// to:要去跳转的路由
// from:来的路由
router.afterEach((to,from)=>{
console.log('欢迎'+window.uname);
})
export default router
About.vue
<template>
<div class="about">
<h1>about</h1>
<button @click="toA">A</button>
<button @click="toB">B</button>
<div style="border:2px red solid">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "About",
data() {
return {
msg: "这是组件的路由守卫",
};
},
methods: {
toA(){
this.$router.push('/about/a')
},
toB(){
this.$router.push('/about/b')
},
},
// 组件内的路由守卫
// beforeRouteEnter相当于生命周期的beforeCreate
beforeRouteEnter(to, from, next) {
// 不能获取组件实例
// 当守卫执行前,组件实例还未创建
next();
},
beforeRouteLeave(to, from, next) {
// 导航离开组件的时候对应路由调用
// 可以访问组件实例
// console.log(this.msg);
next();
},
beforeRouteUpdate(to, from, next) {
// 当前路由改变,但是该组件被复用时才触发
// 在子路由a/b之间跳转的时候才会触发
next();
},
};
</script>
补充 :
最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。