2019年10.13面试的问题和整理的答案

D:\1.vue在php中运行的面试题

问题1：vue页面中一个页面点一个按钮想跳转到另一个页面，路由怎么写？

vue使用router-link :to="{path:'/index'}"传参以及参数的使用

a页面：

<router-link class="btn-link-large add-btn" :to="{path:'/home/groups/list',query:{a:1,b:2,c:'赛事'}}">                <i class="el-icon-plus"></i>  跳转到用户管理 </router-link>

需要知道的是：router-link :to="{path:'/index',query:{a:1}}"

需要调整到的b页面：怎么获取对应的参数

created() { this.getgroups(); console.log(this.$route.query);},

问题2：路由传参方法？

动态路由跳转：params , router-link :to="{path:'/index',params:{a:1}}",获取跳转到的那个页面的参数：this.$route.params.a//前提是routes.js里路径是/:a

正常路由加参数：query，是path和query, router-link :to="{path:'/index',query:{a:1}}"

获取跳转到的那个页面的参数：this.$route.query.id

问题3：面包屑导航里面，动态导航名怎么获取？

回答：基于$route.matched进行面包屑导航匹配，导航名放在router.js的meta里，定义一个title

文件名：users/list.vue

<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">        <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>        <el-breadcrumb-item v-for="bread in breadList" v-bind:key="bread">            {{ bread }}        </el-breadcrumb-item>    </el-breadcrumb>

然后在create()方法里加：this.breadList = [];console.log(this.$route.matched);//路由左匹配了match，是path: "/home",和path: "/home/users/list"的二个数组,因为没有匹配到path所对应的user  for (const routeInfo of this.$route.matched) {   console.log(routeInfo);      if (typeof routeInfo.name === 'string' && routeInfo.name !== 'home') {          this.breadList.push(routeInfo.meta.title);      }  }此时打印： 路由：const routes = [{  path: '/home',  component: Home,  children: [    { path: 'users/list', component: usersList, name: 'usersList', meta: { hideLeft: false, module: 'Administrative', menu: 'users','title':'用户列表' }}],***********其他需要学的******for…of 循环：for (variable of iterable) {    statement}· variable：每个迭代的属性值被分配给该变量。· iterable：一个具有可枚举属性并且可以迭代的对象。const routes = [{    path: '/home',    component: Home,    children: [      { path: '/refresh', component: refresh, name: 'refresh',           children: [path: '/refresh/list', component: refresh, name: 'refresh',]	  }    ]  }];this.$router.matched：根据当前路由左匹配，分别匹配，找有没有对应的path/home：有这个path/home/refresh//home/refresh/list问题4：怎么引用面包屑导航组件？先写公共组件：在components下写BreadCrumb.vue再引用第一步：import方式引入import breadCrumb from '../../../../components/BreadCrumb.vue'第二步：component注册components: {  breadcrumb//如果有第二个组件用逗号},第三步：把组件名用标签形式放指定html<template>   <div>        <breadCrumb></breadCrumb><div><template>问题5：引用组件的方式？第一种，直接页面引入，html的标签是组件名：<dialog-smbox  v-if="smBox" :smbox="smboxMessage"></dialog-smbox>import引入:import Smbox from "./Smbox.vue"模板引入:components: {      "dialog-smbox": Smbox,    },第二种，放入路由里引入：{ path: '/', component: Login, name: 'Login' },第三种，放入main.js里全局引入组件：import  VueBus from 'vue-bus'Vue.use(VueBus);问题6：: 每次请求之前都用loading,这个怎么写在公共方法里？方法一：在main.js里写router.beforEach,通过store.dispatch进行loading的属性绑定router.beforeEach((to, from, next) => {//从哪里来，到哪里去，下一步做啥  const hideLeft = to.meta.hideLeft  store.dispatch('showLeftMenu', hideLeft)//第一个是方法名，第二个是参数  store.dispatch('showLoading', true)//全局loading的方式  NProgress.start()  next()})模块一 : 先了解router钩子函数1.全局导航钩子：所有页面都会到，在main.js里写router.beforeEach（全局前置守卫）: 是页面加载之前，链接权限校验(我有没有权限访问这个内容)，router.afterEach（全局后置守卫）：是页面加载之后 ，做相应操作，比如访问次数统计·   2. 组件内钩子 beforeRouteEnter (to, from, next)（进入路由之前的操作）, beforeRouteUpdate (to, from, next)（路由更新之前的操作）, beforeRouteLeave (to, from, next)（离开路由之前的操作，就是离开组件之前），· 组件写在哪里：在对应.vue文件里，是和data平级的· 3.单独路由独享组件 beforeEnter: 用于执行进入组件之前的操作（用户enter想进入某页面之前，上个页面路径名必须是什么），判断能否进入组件,先访问/home/users/list之后才能访问users/add场景：token比如半小时失效，可以beforeEnter跳转还是到原来页面具体写法：写在在router.js里写，6.后台token失效，用户点击页面又跳到需要重新登陆的状态，这时怎么调路由的钩子函数控制页面不跳转到登录页？问题7: 前端做跨域打开config下面的index.js，找到proxyTable，添加以下代码即可：'/api': { //替换代理地址名称，      target: 'http://api.douban.com/', //代理地址     changeOrigin: true, //可否跨域     pathRewrite: {     '^/api': '' //重写接口，去掉/api    }}这个也只得是能跳过了浏览器的保护 如果后端禁止了也不行问题8:.怎么引vuex?Step1：在main.js引入store，注入。import store from './store'Step2：在store.Js里import Vuex from 'vuex'Vue.use(Vuex) export default new Vuex.Store({  state,//类似vue里的data  mutations,//类似methods，里面可以放方法的  getters,//获取计算属性  actions//让mutations里的方法可以异步调用})问题9:.怎么用vuex?state,//类似vue里的data  mutations,//类似methods，里面可以放方法的，提交更改数据的方法，同步！ getters,//获取state里的属性，actions//让mutations里的方法可以异步调用modules => 模块化Vuex第一步：比如在main.js里写，router.beforeEach((to, from, next) => {//从哪里来，到哪里去，下一步做啥  const hideLeft = to.meta.hideLeft  store.dispatch('showLeftMenu', hideLeft)//第一个是方法名，第二个是参数  store.dispatch('showLoading', true)//全局loading的方式  NProgress.start()  next()})经过store.dispatch(异步)/commit（同步）--第二步：-调action里方法,用commit方式到mutation里第三步: 提交更改数据的方法问题10:如何优化大数据量加载问题？1. 减少无用字段2. 数据扁平化，用基本数据类型，不要用过与复杂的数据类型3. 数据静态化，有的数据能在本地存，就不要老去后台取问题11: 不同的用户登录，看到不同的页面，权限设置怎么写？Admin所有内容都能看，xiaowang登录时账户列表前没有二个添加按钮一句话总结：用户登录时，从后台获取用户的权限列表，并存到localstorage里---每次根据用户是否有相应权限，进行展示或者隐藏第一步：把用户权限列表存到localStorage里获取的权限列表类似这样的：第二步：根据用户是否有相应权限，进行展示或者隐藏第三步：页面展示在需要隐藏的地方v-showgetHasRule方法写在：返回true或者false问题12:完整的路由导航解析流程(不包括其他生命周期)：1. 触发进入其他路由。2. 调用要离开路由的组件守卫beforeRouteLeave3. 调用局前置守卫：beforeEach4. 在重用的组件里调用 beforeRouteUpdate5. 调用路由独享守卫 beforeEnter。6. 解析异步路由组件。7. 在将要进入的路由组件中调用beforeRouteEnter8. 调用全局解析守卫 beforeResolve9. 导航被确认。10. 调用全局后置钩子的 afterEach 钩子。11. 触发DOM更新(mounted)。12. 执行beforeRouteEnter 守卫中传给 next 的回调函数问题13:路由的跳转方式一般有两种1. <router-link to='home'> router-link标签会渲染为<a>标签，咋填template中的跳转都是这种；2. 另一种是编程是导航 也就是通过js跳转 比如 router.push('/home')