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