前端面试之vue实践

原创 前端攻城小牛 随笔 74阅读 25 天前 举报

前端面试之vue实践

由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么?这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

解读router/index.js文件

介绍一个全栈开发交流学习圈,欢迎加入Q群:864305860
我们用vue-cli生产了我们的项目结构,你可以在src/router/index.js文件,这个文件就是路由的核心文件,我们先解读一下它。

介绍一个全栈开发交流学习圈,欢迎加入Q群:864305860
增加一个Hi的路由和页面

对路由的核心文件熟悉后,我们试着增加一个路由配置,我们希望在地址栏输入 http://localhost:8080/#/hi 的时候出现一个新的页面,先来看一下我们希望得到的效果。

具体操作步骤如下:

在src/components目录下,新建 Hi.vue 文件。

编写文件内容,和我们之前讲过的一样,文件要包括三个部分<template><script>和<style>。文件很简单,只是打印一句话。

引入 Hi组件:我们在router/index.js文件的上边引入Hi组件 import Hi from '@/components/Hi'

增加路由配置:在router/index.js文件的routes[]数组中,新增加一个对象,代码如下。

router-link制作导航

现在通过在地址栏改变字符串地址,已经可以实现页面内容的变化了。这并不满足需求,我们需要的是在页面上有个像样的导航链接,我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>标签,我们先来看一下它的语法。 <router-link to="/">[显示字段]</router-link>

子路由

改造App.vue的导航代码

App.vue代码,注意<route-view>的用法。

改写components/Hi.vue页面

把Hi.vue改成一个通用的模板,加入标签,给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都相当于“Hi页面”的子页面,有点想继承关系。我们在“Hi页面”里加入标签。

Hi1.vue

介绍一个全栈开发交流学习圈,欢迎加入Q群:864305860
Hi2.vue

Hi.vue代码

注意新增的router-view

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复