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.在想使用路由的组件中插入

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

cursor: pointer;

5.路由跳转

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

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

最后在根组件中使用来使页面跳转。

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个页面

你可能感兴趣的:(Vue插件篇)