简单了解如何使用vue-router和vue-resource
Posted 爱喝酸奶的吃货
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单了解如何使用vue-router和vue-resource相关的知识,希望对你有一定的参考价值。
我们先来看看vue-router
1.npm install vue-router --save
2.调用vue-router:
第一种方法:
直接在main.js中调用
import vueRouter from \'vue-router\' import helloWorld from \'./components/HelloWorld\' Vue.use(vueRouter) let router = new vueRouter({ mode: \'history\', routes: [{ path: \'/\', name: \'helloWorld\', component: helloWorld }] })
new Vue({ el: \'#app\', router, template: \'<App/>\', components: { App } });
第二种方法:
将路由单独放在一个文件夹中配置
在 src 下新建 router 文件夹,在新建的 router 下,新建 router.js 文件
import Vue from \'vue\' import Router from \'vue-router\' import helloWorld from \'@/components/HelloWorld\' Vue.use(Router) export default new Router({ mode: \'history\', routes: [{ path: \'/\', name: \'helloWorld\', component: helloWorld }] })
main.js
import router from \'./router/router\'
new Vue({ el: \'#app\', router, template: \'<App/>\', components: { App } });
3.app.vue
<template> <div id="app"> <input type="text" class="default-focus"> <router-view/> </div> </template>
再来看看vue-resource
1.npm install vue-resource --save
2.在main.js中调用
import vueResource from \'vue-resource\'
Vue.use(vueResource)
3.接下来我们就可以使用 this.$http.get() 来获取数据啦。
如果大家还不是很明白的话。可以参考:
以上是关于简单了解如何使用vue-router和vue-resource的主要内容,如果未能解决你的问题,请参考以下文章
我可以使用 vue-resource 获得 httpOnly cookie 吗?