Vue插件篇

Vue核心插件其实官方文档里面都有教程，不过就我个人看来，官方的教程太过于繁琐和专业，对于老手比如学过react或angelar的老手可以直接看官方文档就可以学会，但对于刚接触框架的朋友来说，不免有点难懂，我是看的教学视频最后自己理解弄懂的。

Vue的核心插件主要有三个，router，vuex和服务器端（我理解为axios这方面）

这三个部分我只做了router的笔记，其他两个我也不知道笔记去哪了，最后整理出来只有router的笔记了。

vue-router：

1.安装路由

npm/cnpm install vue-router --save

2.在工程中使用路由:

先在根目录下创建一个路由JS文件一般命名为router.js

里面的内容:

import Vue from 'vue'

import Router from 'vue-router'

import Home from '(Home这个组件所在的路径)'

Vue.use(Router)

export default new Router({

mode:'histort', //默认模式，去掉网址中的#/

base: process.env.BASE_URL, //目前尚不知道原因

routes: [

{

path: '/',

name: 'home',

component: Home

}

]

})

3.在main.js中注册路由

在new Vue中添加 router

4.在想使用路由的组件中插入

<router view />

备注：想要让元素变成鼠标移上去变成小手的图标，在样式中加入

cursor: pointer;

5.路由跳转

一般项目中不可能只有一个路由，一般都是多个路由相互嵌套，目前先学习跳转

跳转要先在组件中创建一个你要展示的组件,然后再router.js中添加你的组件路径,

最后在根组件中使用<router-link to="组件名"></router-link>来使页面跳转。

router-link中还有一个属性tag，使用这个属性可以让router-link强制变成一个标签.

6.动态路由（参数传递）

在router.js中的routes中path路径中添加:id,然后在想使用动态路由的组件中接收，

在div中加入{{ this.$router.params.id }}来动态关联路由

7.路由嵌套

就是在router.js引入二级嵌套的组件，然后在想要嵌套的一级组件routes中加入children,

children中有两个属性path和component，三级嵌套也是如此。

8.编程式导航

router.push(location)

意思就是在网页中定义一个按钮或者文字，给这个按钮或者文字添加事件，

在事件中来实现跳转，比如有一个home组件想要点一下跳转到home组件这个页面，

就在事件的函数中添加

this.$router.push("/home")

router.replace(location)

用法如push，只是没有历史记录

router.go(n)

意思就是跳转到历史记录中的第几步,参数n为数字，一般为负数，回退到上n个页面