vue学习 十七 Vue路由和http请求

路由的实现:

首先需要cmd将路由模块装上,然后重启项目,多打几遍就熟悉了npm run dev,在下面的黑窗口中,我之前已经装过了路由模块,显示如下

npm install vue-router --save-dev

npm run dev

vue学习 十七 Vue路由和http请求_第1张图片

 然后你需要的就是在main.js文件中引入路由模板,然后使用它,如下图中第一和第二个画圈的部分

配置路由什么的参照

mode:“history”,的作用是为了去除地址栏中的 /#/ 这个符号的;

vue学习 十七 Vue路由和http请求_第2张图片 

在主模板中,我们使用    来显示所有内容;

我们知道使用 a 标签实现跳转的话就会自动刷新页面再跳转,而使用 go to home 可以不刷新页面达到跳转的效果,至此就实现了vue的路由功能;

vue学习 十七 Vue路由和http请求_第3张图片 

vue学习 十七 Vue路由和http请求_第4张图片 

Http请求: 

和路由一样,首先需要进入cmd加载请求模块

npm install vue-resource --save-dev

 vue学习 十七 Vue路由和http请求_第5张图片

然后在主页面中,使用钩子函数,created在页面加载好之前将数据给拿到,然后给users 

vue学习 十七 Vue路由和http请求_第6张图片 

你可能感兴趣的:(vue前端框架,vue初学之路)