前端面试之vue实践

前端面试之vue实践

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

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

解读router/index.js文件

我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。

import Vue from 'vue' //引入Vueimport Router from 'vue-router' //引入vue-routerimport Hello from '@/components/Hello' //引入根目录下的Hello.vue组件
 Vue.use(Router) //Vue全局使用Router
 export default new Router({ routes: [ //配置路由，这里是个数组
 { //每一个链接都是一个对象
 path: '/', //链接路径
 name: 'Hello', //路由名称，
 component: Hello //对应的组件模板
 }
 ]
})

增加一个Hi的路由和页面

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

具体操作步骤如下：

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

编写文件内容，和我们之前讲过的一样，文件要包括三个部分