Vue核心插件其實官方文檔里面都有教程恋技,不過就我個人看來扔字,官方的教程太過于繁瑣和專業(yè)征唬,對于老手比如學過react或angelar的老手可以直接看官方文檔就可以學會亚皂,但對于剛接觸框架的朋友來說丢烘,不免有點難懂柱宦,我是看的教學視頻最后自己理解弄懂的。
Vue的核心插件主要有三個播瞳,router掸刊,vuex和服務(wù)器端(我理解為axios這方面)
這三個部分我只做了router的筆記,其他兩個我也不知道筆記去哪了赢乓,最后整理出來只有router的筆記了忧侧。
vue-router:
1.安裝路由
npm/cnpm install vue-router --save
2.在工程中使用路由:
先在根目錄下創(chuàng)建一個路由JS文件一般命名為router.js
里面的內(nèi)容:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '(Home這個組件所在的路徑)'
Vue.use(Router)
export default new Router({
mode:'histort', //默認模式石窑,去掉網(wǎng)址中的#/
base: process.env.BASE_URL, //目前尚不知道原因
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
3.在main.js中注冊路由
在new Vue中添加 router
4.在想使用路由的組件中插入
<router view />
備注:想要讓元素變成鼠標移上去變成小手的圖標,在樣式中加入
cursor: pointer;
5.路由跳轉(zhuǎn)
一般項目中不可能只有一個路由蚓炬,一般都是多個路由相互嵌套松逊,目前先學習跳轉(zhuǎn)
跳轉(zhuǎn)要先在組件中創(chuàng)建一個你要展示的組件,然后再router.js中添加你的組件路徑,
最后在根組件中使用<router-link to="組件名"></router-link>來使頁面跳轉(zhuǎn)。
router-link中還有一個屬性tag肯夏,使用這個屬性可以讓router-link強制變成一個標簽.
6.動態(tài)路由(參數(shù)傳遞)
在router.js中的routes中path路徑中添加:id,然后在想使用動態(tài)路由的組件中接收经宏,
在div中加入{{ this.$router.params.id }}來動態(tài)關(guān)聯(lián)路由
7.路由嵌套
就是在router.js引入二級嵌套的組件,然后在想要嵌套的一級組件routes中加入children,
children中有兩個屬性path和component驯击,三級嵌套也是如此烁兰。
8.編程式導航
router.push(location)
意思就是在網(wǎng)頁中定義一個按鈕或者文字,給這個按鈕或者文字添加事件余耽,
在事件中來實現(xiàn)跳轉(zhuǎn)缚柏,比如有一個home組件想要點一下跳轉(zhuǎn)到home組件這個頁面,
就在事件的函數(shù)中添加
this.$router.push("/home")
router.replace(location)
用法如push碟贾,只是沒有歷史記錄
router.go(n)
意思就是跳轉(zhuǎn)到歷史記錄中的第幾步,參數(shù)n為數(shù)字币喧,一般為負數(shù),回退到上n個頁面