vue cli router路由乱跳_Vue（Vue项目、路由vue-router、网络请求vue-resource） 的安装与使用...

一、Vue项目的安装

1. 安装vue脚手架

Npm install --global vue-cli;如已经装过，可忽略

2. 新建安装vue 项目

Vue init webpack vue1(项目名称)

Cd >vue1 cd 到vue1根目录

3. 启动项目

Npm run dev，若启动失败 安装依赖环境，Npm install

二、路由的安装与配置

1. 安装路由

Npm install vue-router --save

2. 路由引入

Import Router form ‘vue-router’（main.js）

Vue.use(Router)

3. 配置路由

1) 新建并导入模块

创建相应的vue模块。例如已创建了（home.vue,news.vue）home与news模块

导入模块

Import Home form ‘/components/home’

Import News form ‘/components/news’

2) 定义路径

const routes=[

{path:’/home’,component:Home},

{path:’/news,component:News}，

{path:’*’,redirect:’/home’}//设置默认路径

]

3) 实例化路由

const router={

routes,

}

4. 挂载路由

new Vue({

el:”#app”,

router,//挂载路由

})

5. 路由使用

1) 在需要使用路由的HTML里放置

<router-view></router-view>

2) 同时添加路由跳转链接

<router-link to="/index" class="head">首页</router-link>,填写路径(to)

三、网络请求vue-resource的安装及使用

1. 安装vue-resource

Npm install vue-resource --save

2. vue-resource的引入（main.js）

Import VueResource form ‘vue-resource’

Vue.use(VueResource)

3. vue-resource的使用

this.$http.get(url).then(res=>{

console.log(res)

})