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(這個是創(chuàng)建package.json文件的)
        先要進入我們項目的安裝目錄，然后執(zhí)行下面的操作
d.nmp install  //安裝項目依賴包，也就是安裝package.json里的包
e.npm run dev  //開發(fā)模式下運行我們的程序。給我們自動構建了開發(fā)用的服務器環(huán)境和在瀏覽器中打開，并實時監(jiān)視我們的代碼更改，即時呈現(xiàn)給我們。
f.npm run build  //發(fā)布文件，項目根目錄生成了dist文件夾，這個文件夾里邊就是我們要傳到服務器上的文件。

2、vue-router：SPA（單頁應用）的路徑管理器

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

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

一層路徑(/xxx)對應一個router-view
比如url: /a/b/c (假設a、b、c都為正常路徑，不會作為參數(shù))
那/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相同，不同之處在于配置路由參數(shù)，在原有的路由配置下加入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參數(shù)傳遞
a.使用to屬性傳遞
使用router-link中的to屬性進行傳參，這時候的to必須使用綁定形式，即：:to
☆☆router-link 定義點擊后導航到哪個路徑下
<router-link :to="{name:'子路由的name值',params:{key:value}}"></router-link>
☆☆ name：就是我們在路由配置文件中起的name值。
☆☆ params：就是我們要傳的參數(shù)，它也是對象形式，在對象里可以傳遞多個值。
☆☆ 接受參數(shù)值
在模板文件里面接收(路由文件模板)，如src/compontnes/Hi1.vue用{{$route.params.key}}
b.使用url進行參數(shù)傳遞
在路由/src/router/index.js配置路由里面進行操作，以:冒號的形式傳遞參數(shù)。
{
path:"/params/:newsId/:newsTitle",//表示需要傳遞的參數(shù)是什么
component:Params
}
在Params.vue組件(頁面)里面輸出，url傳遞的參數(shù)值
{{$route.params.newsId}}
{{$route.params.newsTitle}}
在App.vue文件里面，加上我們要傳遞過去的值
<router-link to="/params/198/i am newsTitle">params</router-link>

6、單頁面多路由區(qū)域操作
<router-view/>顯示模板文件(xx.vue文件)里面的內容，對應的組件內容渲染到router-view中
router-link 和router-view 標簽一一對應，成對出現(xiàn)，router-view只出現(xiàn)在app.vue里面，components里面的組件都不需要加router-link 和router-view
配置使得一個頁面里面有2個以上<router-view>區(qū)域
a。src/App.vue里面配置<router-view>，需要幾個區(qū)域就寫上幾個<router-view>標簽
<router-view name="right"></router-view> //name對應components里面的值
b。在router/index.js路由配置文件里面，引入對應的路由區(qū)域文件模板，如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了
                }
            ***重定向的時候同時傳遞參數(shù)
            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別名：也可以實現(xiàn)類似重定向的效果

<router-link to="/xiao">xiao</router-link>  //這里面的xiao和路由里面的alias值是一樣的
            {
                path:'/Hi1'  //需要重定向到的頁面
                component:Hi1  //該頁面對應的組件
                alias:'/xiao'  //自己取的別名
            }
            ☆☆redirect和alias的區(qū)別
                        redirect：仔細觀察URL，redirect是直接改變了url的值，把url變成了重定向的頁面的path路徑。
                        alias：URL路徑?jīng)]有改變，更友好，讓用戶知道自己訪問的路徑，只是改變了<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**:進入過渡的開始狀態(tài)，元素被插入時生效，只應用一幀后立刻刪除。
    **fade-enter-active**:進入過渡的結束狀態(tài)，元素被插入時就生效，在過渡過程完成后移除。
        **fade-leave**:離開過渡的開始狀態(tài)，元素被刪除時觸發(fā)，只應用一幀后立刻刪除。
        **fade-leave-active**:離開過渡的結束狀態(tài)，元素被刪除時生效，離開過渡完成后被刪除。
        從上面四個類名可以看出，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，例如 http://jsapng.com/lms/，也好看！不帶#
                hash:默認’hash’值，但是hash看起來就像無意義的字符排列，不太好看也不符合我們一般的網(wǎng)址瀏覽習慣。

11、404頁面設置
和設置子路由一樣方式，只不過在path里面，值改為*

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

不在html代碼中使用router-link進行頁面跳轉，而是在js代碼(業(yè)務邏輯)里面進行頁面跳轉
                        methods:{
                            goBack(){
                                this.$router.go(-1);
                            },
                            goForward(){
                                this.$router.go(1);
                            },
                            goHome(){
                                this.$router.push("/")
                            }
                        }