本文共 7756 字，大约阅读时间需要 25 分钟。

---

本人是个新手，写下博客用于自我复习、自我总结。

如有错误之处，请各位大佬指出。

学习资料来源于：尚硅谷

---

vue 项目中常用的 2 个 ajax 库

vue-resource

vue 插件, 非官方库, vue1.x 使用广泛

axios

通用的 ajax 请求库, 官方推荐, vue2.x 使用广泛

免费测试接口

接口 1: https://api.github.com/search/repositories?q=v&sort=stars 接口 2: https://api.github.com/search/users?q=aa

---

vue-resource

安装：

npm i vue-resource --save

简单例：

main.js

import Vue from 'vue'import VueResource from 'vue-resource'import App from './App.vue'//声明使用插件Vue.use(VueResource)//内部会给vm对象和组件对象添加一个属性：$httpnew Vue({
     el: '#app',  components: {
   App}, // 映射组件标签  template: '
   ', // 指定需要渲染到页面的模板})

App.vue

---

axios

npm i axios --save

简例：

---

例

项目结构 （忽略main.js index.html 和 css文件）

App.vue

Main.vue

Search.vue

---

UI组件库

常用

1. Mint UI:
   a. 主页:
   b. 说明: 饿了么开源的基于 vue 的移动端 UI 组件库
2. Elment
   a. 主页:
   b. 说明: 饿了么开源的基于 vue 的 PC 端 UI 组件库

首先安装：npm i --save mint-ui npm i --save-dev babel-plugin-component

实现按需打包，修改 babelrc 配置

"plugins": ["transform-runtime",["component", [	{
   		"libraryName": "mint-ui",		"style": true	}]]]

这个component插件就是专门用来按需打包的。按需打包就是，mint-ui里有很多组件，我们只用了其中的几个，那我们肯定不会把里面所有的内容全部打包下来，我们只把我们使用到的打包下来。

使用：

（所有的组件如何使用，如何导入，在官网有详细说明，在这里就简单演示一下） main.js

import Vue from 'vue'import App from './App.vue'import {
   Button} from 'mint-ui'// 注册成标签(全局)Vue.component(Button.name, Button)/* eslint-disable no-new */new Vue({
     el: '#app',  components: {
   App}, // 映射组件标签  template: '
   ' // 指定需要渲染到页面的模板})

App.vue

index.html

---

vue-router

在真实的应用中，我们做的都是SPA应用（单页应用），但实际上我们承载的功能页面是很多的，那就需要我们的页面在不断的变化，但是不能让页面跳转，所以这里就需要路由链接，让链接不发出请求，而只是更新显示不同的路由组件。

说明：

1. 官方提供的用来实现 SPA 的 vue 插件
2. github:
3. 中文文档:
4. 下载: npm install vue-router --save

路由器：管理路由，

路由：一个映射关系(key - value)，key是path，value是前台路由（组件）或后台路由（处理请求的回调函数）

相关 API 说明

1) VueRouter(): 用于创建路由器的构建函数new VueRouter({
   	// 多个配置项})2) 路由配置routes: [	{
    // 一般路由		path: '/about', 		component: About	},	{
    // 自动跳转路由		path: '/', 		redirect: '/about' 	}]3) 注册路由器import router from './router' new Vue({
   	router})4) 使用路由组件标签1. 
   
    : 用来生成路由链接	
    
     Go to XXX
    2. 
    
     : 用来显示当前路由组件界面	
     
    
   

---

基本路由

项目结构：（忽略了index.html和样式文件）

About.vue

Home.vue

第一步、index.js 定义路由器

/*路由器对象模块 */import Vue from 'vue'import VueRouter from 'vue-router'import About from '../pages/About.vue'import Home from '../pages/Home.vue'// 声明使用vue-router插件Vue.use(VueRouter)export default new VueRouter ({
     // 注册应用中所有的路由  routes: [    {
         path: '/about',      component: About    },    {
         path: '/home',      component: Home    },    {
    //自动跳转路由      path: '/',      redirect: '/about'    }  ]})

第二步、main.js 注册路由器

/* 入口JS */import Vue from 'vue'import App from './App.vue'import router from './router'/* eslint-disable no-new */new Vue({
    //配置对象的属性名都是一些确定的名称，不能随便修改  el: '#app',  components: {
   App}, // 映射组件标签  template: '
   ', // 指定需要渲染到页面的模板  router  // 注册路由器})

第三步、在某个组件中写这几个标签

App.vue

总结: 编写使用路由的 3 步

1. 定义路由组件
2. 注册路由
3. 使用路由
   <router-link>
   <router-view>

---

嵌套路由

项目结构：（忽略index.html、样式，App、About和上面的一样，Message.vue和News.vue是Home.vue下的两个子组件）

根据步骤，定义、注册、使用。

index.js

/*路由器对象模块 */import Vue from 'vue'import VueRouter from 'vue-router'import About from '../pages/About.vue'import Home from '../pages/Home.vue'import News from '../pages/News.vue'import Message from '../pages/Message.vue'// 声明使用vue-router插件Vue.use(VueRouter)export default new VueRouter ({
     // 注册应用中所有的路由  routes: [    {
         path: '/about',      component: About    },    {
         path: '/home',      component: Home,      children: [        {
             path: '/home/news', //path最左侧的 / 永远代表根路径          component: News        },        {
             path: 'message', //简化写法，省略 /          component: Message        },        {
    //自动配置路由          path: '',          redirect: '/home/news'        }      ]    },    {
    //自动配置路由      path: '/',      redirect: '/about'    }  ]})

main.js

/* 入口JS */import Vue from 'vue'import App from './App.vue'import router from './router'/* eslint-disable no-new */new Vue({
     el: '#app',  components: {
   App}, // 映射组件标签  template: '
   ', // 指定需要渲染到页面的模板  router  // 注册路由器})

Home.vue

News.vue

Message.vue

---

向路由组件传递数据

方式 1:<router-view>属性携带数据。这就很简单了。

同时这里介绍一个用法，缓存路由组件对象。

1. 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
2. 如果可以缓存路由组件对象, 可以提高用户体验

App.vue

About.vue

可以发现能够传递数据，同时缓存数据对象，无论怎么切换，输入框内数据可以保持不变。

方式 2: 路由路径携带参数(param)

1)配置路由

children: [	{
   		path: 'mdetail/:id', 		component: MessageDetail	}]

2)路由路径

<router-link :to="'/home/message/mdetail/'+m.id">{

{m.title}}</router-link> 3)路由组件中读取请求参数 this.$route.params.id

实现：

项目结构： index.js

/*路由器对象模块 */import Vue from 'vue'import VueRouter from 'vue-router'import About from '../pages/About.vue'import Home from '../pages/Home.vue'import News from '../pages/News.vue'import Message from '../pages/Message.vue'import MessageDetail from '../pages/MessageDetail.vue'// 声明使用vue-router插件/*内部定义并注册了2个组件标签(router-link/router-view),给组件对象添加了2个属性:  1. $router: 路由器  2. $route: 当前路由 */Vue.use(VueRouter)export default new VueRouter ({
     // 注册应用中所有的路由  routes: [    {
         path: '/about',      component: About    },    {
         path: '/home',      component: Home,      children: [        {
             path: '/home/news', //path最左侧的 / 永远代表根路径          component: News        },        {
             path: 'message', //简化写法，省略 /          component: Message,          children: [            {
                 path:'detail/:id',              component: MessageDetail            }          ]        },        {
    //自动配置路由          path: '',          redirect: '/home/news'        }      ]    },    {
    //自动配置路由      path: '/',      redirect: '/about'    }  ]})

Message.vue

MessageDetail.vue

---

编程式路由导航

相关 API

1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
3. this.$router.back(): 请求(返回)上一个记录路由
4. this.$router.go(-1): 请求(返回)上一个记录路由
5. this.$router.go(1): 请求下一个记录路由

对Message.vue进行修改

转载地址：http://blyki.baihongyu.com/