1、安裝vue-cli腳手架

a.下載安裝node.js，隨包同時(shí)也安裝了npm;
b.安裝vue-cli：npm install vue-cli -g; //全局安裝，只需要安裝一次，以后新建其他的項(xiàng)目不用安裝了
c.vue init webpack demo //初始化項(xiàng)目，注意是vue init，而不是npm init(這個(gè)是創(chuàng)建package.json文件的)
先要進(jìn)入我們項(xiàng)目的安裝目錄，然后執(zhí)行下面的操作
d.nmp install //安裝項(xiàng)目依賴包，也就是安裝package.json里的包
e.npm run dev //開發(fā)模式下運(yùn)行我們的程序。給我們自動(dòng)構(gòu)建了開發(fā)用的服務(wù)器環(huán)境和在瀏覽器中打開，并實(shí)時(shí)監(jiān)視我們的代碼更改，即時(shí)呈現(xiàn)給我們。
f.npm run build //發(fā)布文件，項(xiàng)目根目錄生成了dist文件夾，這個(gè)文件夾里邊就是我們要傳到服務(wù)器上的文件。

2、vue-router：SPA（單頁(yè)應(yīng)用）的路徑管理器

☆☆ src/router/index.js，是路由的核心文件，這里面配置路由參數(shù)：
引入新增加的路由文件：import Hello from '@/components/Hi'
配置路由名稱Hi、路徑/Hi和對(duì)應(yīng)的組件模板

☆☆ 在src/components目錄下，新建 Hi.vue 文件，文件包括三部分：<template><script>和<style>
以上配置完成之后，可以在url欄修改url即可實(shí)現(xiàn)頁(yè)面的切換

一層路徑(/xxx)對(duì)應(yīng)一個(gè)router-view
比如url: /a/b/c (假設(shè)a、b、c都為正常路徑，不會(huì)作為參數(shù))
那/a對(duì)應(yīng)的就是App.vue中的router-view，/a進(jìn)入a.vue這個(gè)組件中
那/a/b對(duì)應(yīng)的就是a.vue中的router-view， /a/b進(jìn)入b.vue這個(gè)組件中

<router-view/>顯示模板文件(xx.vue文件)里面的內(nèi)容

{
    path:'/hi1',  //path值是自定義的，和app.vue里的router-link的to的值一樣
    component:Hi1  //component的值就是import引入的組件名稱，和組件名稱名字一樣
}
##3、router-link：制作導(dǎo)航欄
        寫在src/App.vue文件中的template里
        <router-link to="/">[顯示字段]</router-link>，如：
 
        <p>導(dǎo)航 ：
             <router-link to="/">首頁(yè)</router-link>
             <router-link to="/hi">Hi頁(yè)面</router-link>
        </p>

4、vue-router配置子路由

子路由的情況一般用在一個(gè)頁(yè)面有他的基礎(chǔ)模版，然后它下面的頁(yè)面都隸屬于這個(gè)模版，只是部分改變樣式。
步驟和2相同，不同之處在于配置路由參數(shù)，在原有的路由配置下加入children字段
如：Hi1頁(yè)面隸屬于Hi頁(yè)面

        {
            path:'/hi',
            component:Hi,
            children:[
                {path:'/',name: 'Hi',component:Hi},  
                {path:'hi1',name: 'Hi1',component:Hi1} 
                //path值可以自定義，不必和組件名一樣，name值可以不寫，component的值就是組件名稱
            ]
        }       

5、vue-router參數(shù)傳遞

a.使用to屬性傳遞
使用router-link中的to屬性進(jìn)行傳參，這時(shí)候的to必須使用綁定形式，即：
:to

☆☆router-link 定義點(diǎn)擊后導(dǎo)航到哪個(gè)路徑下
<router-link :to="{name:'子路由的name值',params:{key:value}}"></router-link>
☆☆ name：就是我們?cè)诼酚膳渲梦募衅鸬膎ame值。
☆☆ params：就是我們要傳的參數(shù)，它也是對(duì)象形式，在對(duì)象里可以傳遞多個(gè)值。
☆☆ 接受參數(shù)值
在模板文件里面接收(路由文件模板)，如src/compontnes/Hi1.vue用{{route.params.newsId}}
{{$route.params.newsTitle}}
在App.vue文件里面，加上我們要傳遞過(guò)去的值
<router-link to="/params/198/i am newsTitle">params</router-link>

6、單頁(yè)面多路由區(qū)域操作

<router-view/>顯示模板文件(xx.vue文件)里面的內(nèi)容，對(duì)應(yīng)的組件內(nèi)容渲染到router-view中
router-link 和router-view 標(biāo)簽一一對(duì)應(yīng)，成對(duì)出現(xiàn)，router-view只出現(xiàn)在app.vue里面，components里面的組件都不需要加router-link 和router-view
配置使得一個(gè)頁(yè)面里面有2個(gè)以上<router-view>區(qū)域
a。src/App.vue里面配置<router-view>，需要幾個(gè)區(qū)域就寫上幾個(gè)<router-view>標(biāo)簽
<router-view name="right"></router-view> //name對(duì)應(yīng)components里面的值
b。在router/index.js路由配置文件里面，引入對(duì)應(yīng)的路由區(qū)域文件模板，如import Hi1 from '@/components/Hi1'
c。配置需要在components字段里進(jìn)行(注意多個(gè)router-view就是components了，加個(gè)s)。如：

        {
            path: '/Hi',
            components: {
                default:Hello,
                left:Hi2,
                right:Hi1
            }
        }

7、vue-router 的重定向-redirect

a.在src/App.vue里面新添加導(dǎo)航
<router-link to="/goHome">goHome</router-link>
b.在router/index.js路由配置文件里面，不需要引入路由模板了，因?yàn)槭侵囟ㄏ?br> {
path:'/goHome', //表示要跳轉(zhuǎn)到哪里
redirect:'/' //重定向到首頁(yè),這里不需要component了
}
***重定向的時(shí)候同時(shí)傳遞參數(shù)
a.在src/App.vue里面新添加導(dǎo)航
<router-link to="/goParams">goParams</router-link> //這里面的goParams和路由里面的path值是一樣的
b.在router/index.js路由配置文件里面
{
path:'/goParams/:id/:title',
redirect:'/params/:id/:title' //跳轉(zhuǎn)的路徑
}

8、alias別名：也可以實(shí)現(xiàn)類似重定向的效果

<router-link to="/xiao">xiao</router-link> //這里面的xiao和路由里面的alias值是一樣的

            {
                path:'/Hi1'  //需要重定向到的頁(yè)面
                component:Hi1  //該頁(yè)面對(duì)應(yīng)的組件
                alias:'/xiao'  //自己取的別名
            }

        ☆☆redirect和alias的區(qū)別
                    redirect：仔細(xì)觀察URL，redirect是直接改變了url的值，把url變成了重定向的頁(yè)面的path路徑。
                    alias：URL路徑?jīng)]有改變，更友好，讓用戶知道自己訪問(wèn)的路徑，只是改變了<router-view>中的內(nèi)容。
        ☆☆填坑：別名alias請(qǐng)不要用在path為’/’中，如下代碼的別名是不起作用的。

                    {
                        path: '/',
                        component: Hello,
                        alias:'/home'
                    }

9、路由的過(guò)渡動(dòng)畫

        想讓路由有過(guò)渡動(dòng)畫，需要在<router-view>標(biāo)簽的外部添加<transition>標(biāo)簽，標(biāo)簽還需要一個(gè)name屬性。
        <transition>
            <router-view name="fade" mode="out-in"></router-view>
        </transition>
        css過(guò)渡類名： 組件過(guò)渡過(guò)程中，會(huì)有四個(gè)CSS類名進(jìn)行切換，這四個(gè)類名與transition的name屬性有關(guān)，比如        ** name=”fade”**,會(huì)有如下四個(gè)CSS類名：
    **fade-enter**:進(jìn)入過(guò)渡的開始狀態(tài)，元素被插入時(shí)生效，只應(yīng)用一幀后立刻刪除。
**fade-enter-active**:進(jìn)入過(guò)渡的結(jié)束狀態(tài)，元素被插入時(shí)就生效，在過(guò)渡過(guò)程完成后移除。
    **fade-leave**:離開過(guò)渡的開始狀態(tài)，元素被刪除時(shí)觸發(fā)，只應(yīng)用一幀后立刻刪除。
    **fade-leave-active**:離開過(guò)渡的結(jié)束狀態(tài)，元素被刪除時(shí)生效，離開過(guò)渡完成后被刪除。
    從上面四個(gè)類名可以看出，fade-enter-active和fade-leave-active在整個(gè)進(jìn)入或離開過(guò)程中都有效，所以CSS的transition屬性在這兩個(gè)類下進(jìn)行設(shè)置。
    **過(guò)渡模式mode**：
    **in-out**:新元素先進(jìn)入過(guò)渡，完成之后當(dāng)前元素過(guò)渡離開。
    **out-in**:當(dāng)前元素先進(jìn)行過(guò)渡離開，離開完成后新元素過(guò)渡進(jìn)入。--------這種模式好

10、mode作用

此mode不是上面的過(guò)度動(dòng)畫里面的mode，在export default new Router({})里面設(shè)置

                export default new Router({
                    mode:history',
                    routes:[
                        {
                        }
                    ]
                })

            mode的兩個(gè)值
            histroy:當(dāng)你使用 history 模式時(shí)，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！不帶#
            hash:默認(rèn)’hash’值，但是hash看起來(lái)就像無(wú)意義的字符排列，不太好看也不符合我們一般的網(wǎng)址瀏覽習(xí)慣。

11、404頁(yè)面設(shè)置

和設(shè)置子路由一樣方式，只不過(guò)在path里面，值改為*

12、路由中的鉤子

a.路由配置文件中的鉤子函數(shù)
我們可以直接在路由配置文件（/src/router/index.js）中寫鉤子函數(shù)。但是在路由文件中我們只能寫一個(gè)beforeEnter,就是在進(jìn)入此路由配置時(shí)。
這是一個(gè)函數(shù)，有三個(gè)參數(shù)from對(duì)象、to對(duì)象、next()函數(shù)——一個(gè)開關(guān)，是否跳轉(zhuǎn)到目標(biāo)頁(yè)面
from對(duì)象：路徑跳轉(zhuǎn)前的路徑信息，也是一個(gè)對(duì)象的形式。表示是從哪個(gè)頁(yè)面進(jìn)入到本頁(yè)面
to對(duì)象：路由將要跳轉(zhuǎn)的路徑信息，信息是包含在對(duì)像里邊的。表示要進(jìn)入的頁(yè)面是哪個(gè)
next()：路由的控制參數(shù)，常用的有next(true)和next(false)。一個(gè)開關(guān)，表示是否進(jìn)行跳轉(zhuǎn)到目標(biāo)頁(yè)面
next()一定要寫上，否則就是沒開開關(guān)，禁止跳轉(zhuǎn)了
默認(rèn)是next()：可以跳轉(zhuǎn)，加參數(shù)就是：
next(true)：可以跳轉(zhuǎn)
next(false)：不可以跳轉(zhuǎn)
b.寫在模板中的鉤子函數(shù)：有兩個(gè)鉤子函數(shù)可以使用
beforeRouteEnter：在路由進(jìn)入前的鉤子函數(shù)
beforeRouteLeave：在路由離開前的鉤子函數(shù)
可以監(jiān)控到路由的進(jìn)入和路由的離開，也可以輕易的讀出to和from的值。

beforeRouteEnter:(from,to,next)=>{
//do something
}
beforeRouteLeave:(from,to,next)=>{
//do something
}

13、編程式導(dǎo)航

不在html代碼中使用router-link進(jìn)行頁(yè)面跳轉(zhuǎn)，而是在js代碼(業(yè)務(wù)邏輯)里面進(jìn)行頁(yè)面跳轉(zhuǎn)

                        methods:{
                            goBack(){
                                this.$router.go(-1);
                            },
                            goForward(){
                                this.$router.go(1);
                            },
                            goHome(){
                                this.$router.push("/")
                            }
                        }