【vue】面试题总结 - vue-cli & vue-router

最新推荐文章于 2024-05-01 01:09:13 发布

loyd3

最新推荐文章于 2024-05-01 01:09:13 发布

阅读量615

点赞数

分类专栏： vue开发实践总结文章标签： vue

本文链接：https://blog.csdn.net/loyd3/article/details/118188179

版权

vue开发实践总结专栏收录该内容

35 篇文章 1 订阅

订阅专栏

资源来自：https://developer.aliyun.com/ask/289308?spm=a2c6h.13066354.0.0.767533b5ZcyIwH

vue-cli提供了的哪几种脚手架模板？

vue-cli2.x 好像有个simple和完整版的
vue-cli3.x 提供了自定义装箱配置可以选装

Babel
TypeScript
Progressive Web App (PWA) Support
Router
Vuex
CSS Pre-processors
Linter / Formatter
Unit Testing
E2E Testing

vue-cli工程中常用的npm命令有哪些？

npm install：下载 node_modules 资源包的命令
为什么下载资源包要用npm install？请你谈一下
npm run dev：启动 vue-cli 开发环境的 npm命令（3.0以下😔 ☞ 脚手架2启动方式）
npm run serve:启动 vue-cli 开发环境的 npm命令（3.0以上😀 ☛ 脚手架3启动方式）
npm run build： vue-cli 生成生产环境部署资源的 npm命令（常说的打包文件）
脚手架2打包，生成的是build文件
脚手架3打包，生成的是dist文件
serve build （脚手架2，把你写好的项目打包，然后在本机测试，查看是否完整）
serve dist （脚手架3，把你写好的项目打包，然后在本机测试，查看是否完整）
因为你最后直接给的是打包文件，交工之前直接测试一下，运行打包文件，查看项目是否完整
npm run build–report：用于查看 vue-cli 生产环境部署资源文件大小的 npm命令。（脚手架2、3不一样）
详细可以访问这里：https://blog.csdn.net/q761830908/article/details/103337648

在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？

自动刷新页面并不是vue-cli的功能，而是webpack的hot-module-replacement-plugin插件在做这件事，这个插件是webpack自带的插件，用来做hmr的。如果需要配置hmr只需要在webpack.config.js的devServer字段写下面的配置即可。

{
	contentBase: 服务器可以访问的根目录,
	hot:true, //开启热模块替换也就是hmr
	hotOnly:true //不刷新页面，只做hmr
}

而由于vue-cli3集成了webpack的配置，所以vue.config.js里面也有这个属性，配置写法是一样的。

vue-cli3插件有写过吗？怎么写一个代码生成插件？

MyPlugin.install = function (Vue, options) {

// 1. 添加全局方法或属性

Vue.myGlobalMethod = function () {
// 逻辑...
}

// 2. 添加全局资源

Vue.directive('my-directive', {
	bind (el, binding, vnode, oldVnode) {
	// 逻辑...
	}
	...
})

// 3. 注入组件选项

Vue.mixin({
	created: function () {
	// 逻辑...
	}
	...
})

// 4. 添加实例方法

Vue.prototype.$myMethod = function (methodOptions) {
	// 逻辑...
	}
}

vue-cli生成的项目可以使用es6、es7的语法吗？为什么？

vue-cli 创建的项目配置了babel,可以将es6,es7…etc在webpack打包的时候转换成es5的代码
https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist

vue-cli怎么解决跨域的问题？

vue-cli 主要在本地通过本地服务器拦截转发请求的模式解决跨域问题。
步骤：
config中设置proxy，这步决定哪种命名规则（比如’/abc/'开头的请求）的请求将被拦截（个人以为是通过改造XMLHttpRequest对象）到本地跨域服务器
本地服务器转发请求到目标服务器
本地服务器设置允许跨域的headers，然后返回结果，从而解决跨域
跨域问题，除了单机修改浏览器配置外，都是服务器端配合进行解决。

vue-cli无法解决跨域问题。真正解决跨域问的是webpack。只不过vue-cli3.0将webpack的配置继承到了vue.config.js中，才给初学者造成了vue-cli可以解决跨域的错觉。
与在webpack.config.js中配置跨域一样，在vue.config.js中的devServer:{proxy:{}}字段可以编写跨域配置。
具体的配置写法webpack文档写的很清楚。

vue-cli中你经常的加载器有哪些？

vue-loader/style-loader/sass-loader/url-loader…

你知道什么是脚手架吗？

vue项目一般是使用webpack进行打包构建的，然而如果每一个项目都需要我们去配置loader和plugin的话，是很重复的劳动，并且vue项目需要使用到的最基本的
webpack loader和webpack plugin是相同的。因此官方推出了vue-cli这个脚手架，使用它就可以快速的生成一份通用的webpack配置，并且帮我们安装好很多必定会用到的npm包。

说下你了解的vue-cli原理？你可以自己实现个类vue-cli吗？

https://www.cnblogs.com/dillonmei/p/12570860.html

怎么使用vue-cli3创建一个项目？

https://blog.csdn.net/q761830908/article/details/103243518

vue-cli3你有使用过吗？它和2.x版本有什么区别？

vue-cli3.0 将webpack的配置集成了进来，使用vue-cli3.0创建的项目在配置webpack的时候可以直接在vue.config.js里面配置。
既可以用chainwebpack的链式语法也可以直接在configureWebpack字段内直接写webpack原生的配置。

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
vue cli 3 npm install -g @vue/cli
vue create hello-world

vue cli 2.x npm install -g vue-cli
vue init webpack my-project

vue-router怎么重定向页面？

方法一：在routes:

[{
{ path: '/a', redirect: '/b' }
}]

方法二：别名

routes: [
{ path: '/a', component: A, alias: '/b' }
]

vue-router怎么配置404页面？

https://blog.csdn.net/qq_33026699/article/details/81740583

export default {
    path: '*',
    name: '404',
    component: '组件404',
}

需注意：将改路由配置放到所有路由的配置信息的最后，否则会其他路由path匹配造成影响。

切换路由时，需要保存草稿的功能，怎么实现呢

用keep-alive缓存那个路由

你这题目想说明的是，切换路由时自动或提示保存草稿功能吗？
如果是这样

beforeRouteLeave (to, from, next) {
  if(用户已经输入信息){
    //出现弹窗提醒保存草稿，或者自动后台为其保存
    
  }else{
    next(true);//用户离开
  }
}

vue-router路由有几种模式？说说它们的区别？

hash模式：
1.url路径会出现“#”号字符
2.hash值不包括在Http请求中，它是交由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求
3.hash值的改变会触发hashchange事件
history模式：
1.整个地址重新加载，可以保存历史记录，方便前进后退
2.依赖H5 API和后台配置，没有后台配置的话，页面刷新时会出现404

vue-router有哪几种导航钩子（导航守卫）？

https://www.cnblogs.com/kzxiaotan/p/11676872.html
共有三种守卫：
1:全局守卫：beforeEach,afterEach
2:路由独享守卫：beforeEnter
3:组件级别的守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
他们执行顺序：全局>路由>组件
除了afterEach全局后置外，其他的守卫中务必要调用next(),否则无法完成导航
还有注意全局前置守卫可以用来进行拦截，（登录拦截）

说说你对router-link的了解

https://mp.weixin.qq.com/s?__biz=MzU3MzE2NzIyMA==&mid=2247484157&idx=1&sn=8a7b4512586b1d70d719e9d04d701621&chksm=fcc481e6cbb308f0b58891fe0e738ea3ff0904b940f08f12e649fe8932eb3cc639f911112f18&token=515887516&lang=zh_CN#rd
https://www.jb51.net/article/159711.htm

vue-router如何响应路由参数的变化？

切换路由，路由参数发生了变化，但是页面数据并未及时更新，需要强制刷新后才会变化。
不同路由渲染相同的组件时（组件复用比销毁重新创建效率要高），在切换路由后，当前组件下的生命周期函数不会再被调用。
解决方案：
使用 watch 监听

watch: {
    $route(to, from){
        if(to != from) {
            console.log("监听到路由变化，做出相应的处理");
        }
    }
}

向 router-view 组件中添加 key

<router-view :key="$route.fullPath"></router-view>

切换到新路由时，页面要滚动到顶部或保持原先的滚动位置怎么做呢？

通过router 的meta来记录需要保存滚动条的位置,在new VueRouter()时调用scrollBehavior(to, from, savedPosition) {return { x: 0, y: 0 }}的方法

在什么场景下会用到嵌套路由？

举个例子，例如做个管理系统，顶部栏和左侧菜单栏是全局通用的，那就应该放在父路由，而右下的页面内容部分放在子路由

说说active-class是哪个组件的属性？

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；用来设置链接激活时使用的类名

在vue组件中怎么获取到当前的路由信息？

this.$route.path 或者 this.$route
如果是template中获取直接 $route 即可

vue-router怎么重定向？

路径：{ path: '/a', redirect: '/b' }
命名的路由： { path: '/a', redirect: {name:'/foo'} }
动态重定向目标：

{ path: '/a', redirect: to => {
const {
	query,
	params,
	hash
} = to
if (params.name) {
	return /${params.name}
} else if (query.to && query.to === "bar") {
	return /${query.to}
} else if (hash === '#baz') {
	return '/baz'
	}
}
}

怎样动态加载路由？

router.addRoutes(routes, Array<RouteConfig>)

规则是参数必须是一个符合routes选项要求的数组

<div id="first">
    <router-link to="/a">老八一号</router-link>
    <router-link to="/b">老八二号</router-link>
    <router-link to="/c">老八三号</router-link>
    <router-link to="/d">老八四号</router-link>
    <router-view></router-view>
</div>
<script>
    let a={
        template:`<h1>奥里给 干了 兄弟们</h1>`
    };
    let b={
        template:`<h2>虽然不是同一个时间，但是是同一个撤所儿</h2>`
    };
    let c={
        template:`<h3>就吃老八秘制晓汉堡儿</h3>`
    };
    let d={
        template:`<h2>老八秘制晓汉堡  既便宜它还管饱</h2>`
    };

    let routerObj=new VueRouter({
        routes:[
            {path:'/a',component:a,name:'一号'},
            {path:'/b',component:b,name:'二号'}
        ]
    });
    routerObj.addRoutes([
        {path:'/c',component:c,name:'三号'},
        {path:'/d',component:d,name:'四号'}
    ]);
    let vm=new Vue({
        el:"#first",
        data:{},
        router:routerObj
    })
</script>

怎么实现路由懒加载呢？

1.vue的异步组件：resolve=>require(['需要异步加载的组件']，resolve)
2.es6的import方法：（）=>import(需要异步加载的组件)
3.webpack的 require.ensure： r => require.ensure([],()=>r( require(需要异步加载的组件))，chunkName)

如果让你从零开始写一个vue路由，说说你的思路

为了方便后期维护，建议独立出一个 router.js 文件
npm install vue-router
引入注册

import Router from 'vue-router';
Vue.user(Router);

向外暴露出一个router实例

export default new Router({
    mode: '',
    path: '',
    name: '',
    ...
});

说说vue-router完整的导航解析流程是什么？

1.导航被触发
2.在即将离开的组件里调用beforeRouteLeave守卫
3.调用全局前置守卫beforeEach守卫
4.在重用的组件里调用beforeRouteUpdate守卫 / 调用路由配置的beforeEnter守卫
5.解析异步路由组件
6.在被激活的组件里调用beforeRouteEnter
7.调用全局的beforeResolve守卫
8.导航被确认
9.调用全局的 afterEach 钩子
10.触发DOM更新
11.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由之间是怎么跳转的？有哪些方式？

1.在vue中引入vue-router模块
2.定义路由跳转规则
有以下方式：
1.在页面使用来定义导航链接
2.使用编程式导航，push，replace，go

如果vue-router使用history模式，部署时要注意什么？

服务器的404页面需要重定向到index.html

route和router有什么区别？

route：代表当前路由信息对象，可以获取到当前路由的信息参数
router：代表路由实例的对象，包含了路由的跳转方法，钩子函数等

vue-router钩子函数有哪些？都有哪些参数？

1.全局：
前置守卫：beforeEach((to, from, next)=>{
to：即将进入的路由对象
form：当前导航正要离开的路由
next()：进行管道中的下一个钩子
})
解析守卫：beforeResolve((to, from, next)=>{})
后置钩子：afterEach((to,form)=>{})

路由：beforeEnter((to, from, next)=>{})

组件：
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 this
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 this
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 this
}

vue-router是用来做什么的？它有哪些组件？

vue-router路由，通俗来讲主要是来实现页面的跳转，通过设置不同的path，向服务器发送的不同的请求，获取不同的资源。
主要组件：router-view、router-link

loyd3

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【vue】面试题总结 - vue-cli & vue-router

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar
复制链接

扫一扫