vue-router筆記
1、安裝vue-cli腳手架
a.下載安裝node.js,隨包同時也安裝了npm;
b.安裝vue-cli:npm install vue-cli -g; //全域性安裝,只需要安裝一次,以後新建其他的專案不用安裝了
c.vue init webpack demo //初始化專案,注意是vue init,而不是npm init(這個是建立package.json檔案的)
先要進入我們專案的安裝目錄,然後執行下面的操作
d.nmp install //安裝專案依賴包,也就是安裝package.json裡的包
e.npm run dev //開發模式下執行我們的程式。給我們自動構建了開發用的伺服器環境和在瀏覽器中開啟,並實時監視我們的程式碼更改,即時呈現給我們。
f.npm run build //釋出檔案,專案根目錄生成了dist資料夾,這個資料夾裡邊就是我們要傳到伺服器上的檔案。
2、vue-router:SPA(單頁應用)的路徑管理器
src/router/index.js,是路由的核心檔案,這裡面配置路由引數:
引入新增加的路由檔案:import Hello from '@/components/Hi'
配置路由名稱Hi、路徑`/Hi`和對應的元件模板
在src/components目錄下,新建 Hi.vue 檔案,檔案包括三部分:<template><script>和<style>
以上配置完成之後,可以在url欄修改url即可實現頁面的切換
一層路徑(/xxx)對應一個router-view
比如url: /a/b/c (假設a、b、c都為正常路徑,不會作為引數)
那/a對應的就是App.vue中的router-view,/a進入a.vue這個元件中
那/a/b對應的就是a.vue中的router-view, /a/b進入b.vue這個元件中
<router-view/>顯示模板檔案(xx.vue檔案)裡面的內容
import Hi1 from '@/components/Hi1'
{
path:'/hi1', //path值是自定義的,和app.vue裡的router-link的to的值一樣
component:Hi1 //component的值就是import引入的元件名稱,和元件名稱名字一樣
}
3、router-link:製作導航欄
寫在src/App.vue檔案中的template裡
<router-link to="/">[顯示欄位]</router-link>,如:
<p>導航 :
<router-link to="/">首頁</router-link>
<router-link to="/hi">Hi頁面</router-link>
</p>
4、vue-router配置子路由
子路由的情況一般用在一個頁面有他的基礎模版,然後它下面的頁面都隸屬於這個模版,只是部分改變樣式。
步驟和2相同,不同之處在於配置路由引數,在原有的路由配置下加入children欄位
如:Hi1頁面隸屬於Hi頁面
{
path:'/hi',
component:Hi,
children:[
{path:'/',name: 'Hi',component:Hi},
{path:'hi1',name: 'Hi1',component:Hi1}
//path值可以自定義,不必和元件名一樣,name值可以不寫,component的值就是元件名稱
]
}
5、vue-router引數傳遞
a.使用to屬性傳遞
使用router-link中的to屬性進行傳參,這時候的to必須使用繫結形式,即::to
router-link 定義點選後導航到哪個路徑下
<router-link :to="{name:'子路由的name值',params:{key:value}}"></router-link>
name:就是我們在路由配置檔案中起的name值。
params:就是我們要傳的引數,它也是物件形式,在物件裡可以傳遞多個值。
接受引數值
在模板檔案裡面接收(路由檔案模板),如src/compontnes/Hi1.vue用{{$route.params.key}}
b.使用url進行引數傳遞
在路由/src/router/index.js配置路由裡面進行操作,以:冒號的形式傳遞引數。
{
path:"/params/:newsId/:newsTitle",//表示需要傳遞的引數是什麼
component:Params
}
在Params.vue元件(頁面)裡面輸出,url傳遞的引數值
{{$route.params.newsId}}
{{$route.params.newsTitle}}
在App.vue檔案裡面,加上我們要傳遞過去的值
<router-link to="/params/198/i am newsTitle">params</router-link>
6、單頁面多路由區域操作
<router-view/>顯示模板檔案(xx.vue檔案)裡面的內容,對應的元件內容渲染到router-view中
router-link 和router-view 標籤一一對應,成對出現,router-view只出現在app.vue裡面,components裡面的元件都不需要加router-link 和router-view
配置使得一個頁面裡面有2個以上<router-view>區域
a。src/App.vue裡面配置<router-view>,需要幾個區域就寫上幾個<router-view>標籤
<router-view name="right"></router-view> //name對應components裡面的值
b。在router/index.js路由配置檔案裡面,引入對應的路由區域檔案模板,如import Hi1 from '@/components/Hi1'
c。配置需要在components欄位裡進行(注意多個router-view就是components了,加個s)。如:
{
path: '/Hi',
components: {
default:Hello,
left:Hi2,
right:Hi1
}
}
7、vue-router 的重定向-redirect
a.在src/App.vue裡面新新增導航
<router-link to="/goHome">goHome</router-link>
b.在router/index.js路由配置檔案裡面,不需要引入路由模板了,因為是重定向
{
path:'/goHome', //表示要跳轉到哪裡
redirect:'/' //重定向到首頁,這裡不需要component了
}
***重定向的時候同時傳遞引數
a.在src/App.vue裡面新新增導航
<router-link to="/goParams">goParams</router-link> //這裡面的goParams和路由裡面的path值是一樣的
b.在router/index.js路由配置檔案裡面
{
path:'/goParams/:id/:title',
redirect:'/params/:id/:title' //跳轉的路徑
}
8、alias別名:也可以實現類似重定向的效果
<router-link to="/xiao">xiao</router-link> //這裡面的xiao和路由裡面的alias值是一樣的
{
path:'/Hi1' //需要重定向到的頁面
component:Hi1 //該頁面對應的元件
alias:'/xiao' //自己取的別名
}
redirect和alias的區別
redirect:仔細觀察URL,redirect是直接改變了url的值,把url變成了重定向的頁面的path路徑。
alias:URL路徑沒有改變,更友好,讓使用者知道自己訪問的路徑,只是改變了<router-view>中的內容。
填坑:別名alias請不要用在path為’/’中,如下程式碼的別名是不起作用的。
{
path: '/',
component: Hello,
alias:'/home'
}
9、路由的過渡動畫
想讓路由有過渡動畫,需要在<router-view>標籤的外部新增<transition>標籤,標籤還需要一個name屬性。
<transition>
<router-view name="fade" mode="out-in"></router-view>
</transition>
css過渡類名: 元件過渡過程中,會有四個CSS類名進行切換,這四個類名與transition的name屬性有關,比如 ** name=”fade”**,會有如下四個CSS類名:
**fade-enter**:進入過渡的開始狀態,元素被插入時生效,只應用一幀後立刻刪除。
**fade-enter-active**:進入過渡的結束狀態,元素被插入時就生效,在過渡過程完成後移除。
**fade-leave**:離開過渡的開始狀態,元素被刪除時觸發,只應用一幀後立刻刪除。
**fade-leave-active**:離開過渡的結束狀態,元素被刪除時生效,離開過渡完成後被刪除。
從上面四個類名可以看出,fade-enter-active和fade-leave-active在整個進入或離開過程中都有效,所以CSS的transition屬性在這兩個類下進行設定。
**過渡模式mode**:
**in-out**:新元素先進入過渡,完成之後當前元素過渡離開。
**out-in**:當前元素先進行過渡離開,離開完成後新元素過渡進入。--------這種模式好
10、mode作用
此mode不是上面的過度動畫裡面的mode,在export default new Router({})裡面設定
export default new Router({
mode:history',
routes:[
{
}
]
})
mode的兩個值
histroy:當你使用 history 模式時,URL 就像正常的 url,例如 ,也好看!不帶#
hash:預設’hash’值,但是hash看起來就像無意義的字元排列,不太好看也不符合我們一般的網址瀏覽習慣。
11、404頁面設定
和設定子路由一樣方式,只不過在path裡面,值改為*
12、路由中的鉤子
a.路由配置檔案中的鉤子函式
我們可以直接在路由配置檔案(/src/router/index.js)中寫鉤子函式。但是在路由檔案中我們只能寫一個beforeEnter,就是在進入此路由配置時。
這是一個函式,有三個引數from物件、to物件、next()函式——一個開關,是否跳轉到目標頁面
from物件:路徑跳轉前的路徑資訊,也是一個物件的形式。表示是從哪個頁面進入到本頁面
to物件:路由將要跳轉的路徑資訊,資訊是包含在對像裡邊的。表示要進入的頁面是哪個
next():路由的控制引數,常用的有next(true)和next(false)。一個開關,表示是否進行跳轉到目標頁面
next()一定要寫上,否則就是沒開開關,禁止跳轉了
預設是next():可以跳轉,加引數就是:
next(true):可以跳轉
next(false):不可以跳轉
b.寫在模板中的鉤子函式:有兩個鉤子函式可以使用
beforeRouteEnter:在路由進入前的鉤子函式
beforeRouteLeave:在路由離開前的鉤子函式
可以監控到路由的進入和路由的離開,也可以輕易的讀出to和from的值。
beforeRouteEnter:(from,to,next)=>{
//do something
}
beforeRouteLeave:(from,to,next)=>{
//do something
}
13、程式設計式導航
不在html程式碼中使用router-link進行頁面跳轉,而是在js程式碼(業務邏輯)裡面進行頁面跳轉
methods:{
goBack(){
this.$router.go(-1);
},
goForward(){
this.$router.go(1);
},
goHome(){
this.$router.push("/")
}
}
©著作權歸作者所有:來自51CTO部落格作者xxxpjgl的原創作品,如需轉載,請註明出處,否則將追究法律責任
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2249/viewspace-2819062/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Vue-Router學習筆記Vue筆記
- Vue-Router基礎學習筆記Vue筆記
- VUE複習筆記30(vue-router詳解進階)Vue筆記
- vue2.0學習筆記(八):vue-router 路由配置(1)–基礎篇Vue筆記路由
- vue-routerVue
- vue-router教程Vue
- 印象筆記 --- 方法分享筆記筆記
- vue-router原理剖析Vue
- 認識vue-routerVue
- vue-router的使用Vue
- vue-router不跳轉Vue
- 記一次前端菜鳥使用vuecli與vuex與vue-router前端Vue
- 筆記筆記
- vue-router 原始碼:實現一個簡單的 vue-routerVue原始碼
- vue-router 巢狀路由Vue巢狀路由
- vue-router的鉤子Vue
- vue-router命名檢視Vue
- Vue-router外掛使用Vue
- vue-router路由基礎Vue路由
- vue-router相關配置Vue
- docker 筆記Docker筆記
- hybrid筆記筆記
- Meteor筆記筆記
- String筆記筆記
- html 筆記HTML筆記
- kafka 筆記Kafka筆記
- 路由筆記路由筆記
- 筆記1筆記
- 筆記-FMDB筆記
- ES筆記筆記
- 筆記:Docker筆記Docker
- Liunx筆記筆記
- webSocket筆記Web筆記
- Shadowsocks 筆記筆記
- AbstractQueuedSynchronizer筆記筆記
- 筆記:Spring筆記Spring
- jQuery筆記jQuery筆記
- Restful 筆記REST筆記