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傳遞的引數值

在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屬性。

<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("/")

}

vue-router筆記

相關文章