vue-router教程

一、檔案目錄說明

main.js：應用的入口檔案【js檔案入口】

App.vue：根元件，整個元件的入口【元件檔案入口】

載入檔案不要字尾名：

resolve:{

    extensions:['.js','.vue','.json'],

    alias:{

        'vue$':'vue/dist/vue.esm.js',

        '@':resolve('src')  //@就代表了"src"這個目錄

    }

}

import App from './App';  就相當於 './App.vue';

import router from './router'  //載入某個目錄下的index.js檔案，可以簡寫，就相當於 './router/index.js'

.gitignore

上傳git倉庫的時候，不上傳某些檔案，比如node_modules，因為太大了，

所以從git倉庫clone檔案下來的時候，首先就是要npm install，安裝package.json裡面定義的依賴包

然後就是npm run dev

index.js檔案，定義路由(預設匯出)

export default new Router({})

也可以：

let router = new Router({}) //先定義，下面匯出，這樣就可以用到router路由例項了

export default router

匯出之後，在main.js裡面引入的：import router from './router'，得到一個路由例項

然後再將路由例項router注入到new Vue()這個根例項裡面，就可以用到router裡面的一些資訊

然後在App.vue裡面，寫入<router-view></router-view>，展示對應渲染的元件

index.js Vue.use( Router ) //透過這種寫法，就可以在每個元件裡面，透過this.$router訪問到當前路由例項

二、使用步驟

    安裝模組

        npm install vue-router --save -dev (vue-cli腳手架裡面就已經安裝好了)

    引入模組

        import *VueRouter* from 'vue-router'

    作為vue的外掛

        Vue.use(*VueRouter*)

    建立路由例項物件

        new VueRouter({

            ...配置引數

        })

    注入Vue選項引數

        new Vue({

            router

        })

    告訴路由渲染位置

        <router-view></router-view>

三、router-link各種配置項

一個路徑，對應渲染一個元件，實際就是分別替換<router-view></router-view>

1、目標地址可以寫死

<li><router-link to="/home">home</router-link></li>

2、目標地址可以動態繫結

<li><router-link :to="index">home</router-link></li>

export default{

    name:'App',

    data(){

        return {

            index:'/home'

        }

    }

}

3、目標地址可以寫成物件形式

<li><router-link **:to="{path:'/home'}">home**</router-link></li>

4、導航不僅僅只用a標籤來設定，也可以使用別的標籤，如div、p、li等等

<router-link :to="index" tag="li">  //寫上tag="li"即可

    <i class="fa fa-home"></i>

    <span>home</span>

</router-link>

5、不同元件，設定同一套樣式

<router-view class="center" />  //這會把類名.center渲染到每個元件的根元素上，就可以所有路由元件共享一個類名

6、改變導航切換事件，預設是click

<router-link :to="index" tag="li" event="mouseover">

7、重定向

{

        path:'*',

        //component:noPath

        //重定向

        //redirect:'/about'

        //redirect:{path:'/home'}

        //redirect:{name:'Document'}

        redirect:(to)=>{  //動態設定重定向的目標

            console.log(to) //目標路由物件就是訪問的路徑的路由資訊

            if(to.path === '/123'){

                return '/home'

            }else if(to.path === '/456'){

                return {path:'/about'}

            }else{

                return {name:'Document'}

            }

        }

    }

四、路由巢狀子路由

在path裡面，'/'都是相對根路徑而言，如果寫子路由，那麼前面就不需要加'/'了

{

    path: '/about',

    component: about,

    children:[

        {

            path:'',  //預設的子路由 /about

            name: 'About',

            component:work

        },

        {

            path:'study',  //前面不需要加'/'

            name: 'Study',

            component:study

        },

        {

            path:'hobby',

            name: 'Hobby',

            component:hobby

        }

    ]

}

<template>

  <div class="about">

    <ul>

        <router-link to="/about" **exact** tag="li">

            <a>work</a>

        </router-link>

        <router-link to="/about/study" tag="li">

            <a>study</a>

        </router-link>

        <router-link to="/about/hobby" tag="li">

            <a>hobby</a>

        </router-link>

    </ul>

    <router-view></router-view>

  </div>

</template>

也可以使用name，此時需要動態繫結v-bind

<template>

  <div class="about">

    <ul>

        <router-link :to="{name:'Work'}" exact tag="li">

            <a>work</a>

        </router-link>

        <router-link :to="{name:'Study'}" tag="li">

            <a>study</a>

        </router-link>

        <router-link :to="{name:'Hobby'}" tag="li">

            <a>hobby</a>

        </router-link>

    </ul>

    <router-view></router-view>

  </div>

</template>

五、命名檢視：單頁面多路由區域操作

在同級同時展示多個檢視，而不是巢狀展示

{

      path: '/document',

      name: 'Document',

      components:{

        default:document,  //預設的

        slider:slider  //新新增的

      }

    },

<router-view name="slider" class="center" />  //有name屬性的，會匹配到components裡面對應名稱的元件

<router-view class="center" />  //沒有name屬性的會自動對應default的元件

六、滾動行為

記錄頁面滾動的位置，點選瀏覽器上的前進後退按鈕，仍然會回到對應的頁面位置

在index.js裡面配置

export default new Router({

    mode:'history',

    linkActiveClass:'is-active',  //表示給選中的導航新增類名is-active

    scrollBehavior(to,from,savePosition){ //點選瀏覽器的前進後退按鈕或切換導航時觸發該事件

        console.log(to); //要進入的目標路由物件，即要去向哪裡

        console.log(from); //離開的路由物件，即從哪裡來

        console.log(savePosition);  //記錄捲軸的座標位置 只在點選前進後退按鈕時才記錄

        if(savePosition){

            return savePosition

        }else{

            return {x:0,y:0}

        }

    },

    routes:[

        {

      path: '/home',

      name: 'Home',

      component: home

      meta:{

        index:0

      }

    }

    ]

})

七、動態路徑

匹配到的所有路由，全部對映到同一個元件

路徑：/user/:userId/ userId為動態路徑引數

獲取引數：路由資訊物件的params

具體例子：比如使用者登入個人資訊頁，頁面是一樣的，都是同一個元件，但是不同使用者要展示的資訊是不一樣的，這就透過userId來展示對應的資訊，拿到userId就可以獲取到使用者的資訊

vue的路由有一個路由例項$router

透過在Vue根例項的router配置傳入router例項

new Vue({

  el: '#app',

  router,  //也可以寫成router:router

  components: { App },

  template: '<App/>'

})

在每一個元件裡面，透過$router拿到router路由例項

$route 當前啟用的路由資訊物件，每個元件例項都會有，每次成功導航後都會產生一個新的物件

vue-router教程

{

    path: '/user/:userId?',

    name: 'User',

    component: user

},

<template>

    <div class="user">

        <div class="user-list">

           <!-- <router-link style="padding: 0 20px;" :to="'/user/'+item.id" :key="index" v-for="item,index in userList">{{item.userName}}</router-link>-->

            <router-link style="padding: 0 20px;" :to="{path:'/user/'+item.id,query:{info:'follow'}}" :key="index" v-for="item,index in userList">{{item.userName}}</router-link>

        </div>

        <div class="user-list" style="font-size: 20px;" v-show="userInfo.userName">

            <p>姓名：{{userInfo.userName}}</p>

            <p>性別：{{userInfo.sex}}</p>

            <p>愛好：{{userInfo.hobby}}</p>

        </div>

        <hr />

        <div class="info-list" v-if="userInfo.userName">

            <router-link exact to="?info=follow" >follow</router-link>

            <router-link exact to="?info=share" >share</router-link>

                    <!--<router-link exact :to="{path:'',query:{info:'follow'}}">他的關注</router-link>

            <router-link exact :to="{path:'',query:{info:'share'}}">他的分享</router-link>-->

            <div>{{$route.query}}</div>

        </div>

    </div>

</template>

<script>

let data = [

        {

                id:1,

                userName:"leo1",

                sex:'男',

                hobby:'寫程式碼'

        },

        {

                id:2,

                userName:"leo2",

                sex:'男',

                hobby:'唱歌'

        },

        {

                id:3,

                userName:"leo3",

                sex:'男',

                hobby:'讀書'

        }

]

export default{

    name:"User",

    data(){

        return {

            userList:data,

            userInfo:{}

        }

    },

    watch:{  //監測Vue例項上的資料變動，這裡是監聽$route，路徑發生變化，$route會重新賦值，監控了這個屬性，會執行裡面的函式

        $route(){

            this.getData();

        }

    },

    created(){  //ajax提交資訊也放在這裡面

        // 渲染這個元件會呼叫一次這個生命週期函式

        // 複用這個元件，這個函式不會再次被呼叫了

        // 地址一旦發生變化，$route會重新生成一個路由資訊物件

        this.getData();

    },

    methods:{

        getData(){

            let id = this.$route.params.userId;

            if(id){

                this.userInfo = this.userList.filter((item)=>{  //this.userList是陣列，現在需要返回的是一個物件，所以取陣列的第一項

                    return item.id == id;

                })[0]

            }else{

                this.userInfo = {}

            }

        }

    }

}

</script>

八、給導航切換增加過度動畫transition

過渡的css類名：

v-enter：定義進入過渡的開始狀態

v-enter-active：定義進入活動狀態

v-enter-to：定義進入的結束狀態

v-leave：定義離開過渡的開始狀態

v-leave-active：定義離開活動狀態

v-leave-to：定義離開的結束狀態

vue-router教程

自定義過度動畫：

.left-enter{

    tranform:translateX(-100%)

}

.left-enter-to{

    tranform:translateX(0)

}

.left-enter-active{

    transition:1s;

}

使用：

<transition name="left" mode="out-in">

    <router-view class="center"></router-view>

</transition>

過渡模式：

可能會有2個元件同時出現在頁面上的情況，會重疊在一起，很難看。這裡就用到了過渡模式

in-out：新元素先進行過渡，完成之後當前元素過渡離開

out-in：當前元素先進行過渡，完成之後新元素過渡進入

<transition mode="out-in">

    <router-view class="center"></router-view>

</transition>

路由元資訊：

在路由配置中meta可以配置一些資料，用在路由資訊物件中

訪問meta中資料：$route.meta.index //index是自己設定的屬性名

<template>

  <div id="app">

        <div class="nav-box">

            <ul class="nav">

                <router-link :to="idx" tag="li" event="mouseover">

                    <i class="fa fa-home"></i>

                    <span>home</span>

                </router-link>

                <li>

                    <router-link :to="{path:'/about'}" event="mouseover">about</router-link>

                </li>

                <li>

                    <router-link to="/document" event="mouseover">document</router-link>

                </li>

                <li>

                    <router-link to="/user" event="mouseover">user</router-link>

                </li>

            </ul>

        </div>

        <router-view name="slider" class="" />

    <!--<transition mode="out-in">

            <router-view class="center"></router-view>

        </transition>-->

        <transition :name="names">

            <router-view class="center"></router-view>

        </transition>

  </div>

</template>

<script>

export default {

  name: 'App',

  data(){

    return{

        idx:'/home',

        names:"left"

    }

  },

  watch:{

    $route(to,from){

        console.log(to.meta.index,from.meta.index)

        if(to.meta.index < from.meta.index){

            this.names="left"

        }else{

            this.names="right"

        }

    }

  }

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

.v-enter{

    opacity: 0;

}

.v-enter-to{

    opacity: 1;

}

.v-enter-active{

    transition: 0.5s;

}

.v-leave{

    opacity: 1;

}

.v-leave-to{

    opacity: 0;

}

.v-leave-active{

    transition: 0.5s;

}

.left-enter{

    transform: translateX(-100%);

}

.left-enter-to{

    transform: translateX(0);

}

.left-enter-active,.right-enter-active{

    transition: 1s;

}

.right-enter{

    transform: translateX(100%);

}

.right-enter-to{

    transform: translateX(0);

}

index.js配置：

{

    path: '/home',

    name: 'Home',

    component: home,

    meta:{

        index:0

    }

},

</style>

九：程式設計式導航

藉助於router的例項方法$router，透過編寫程式碼來實現導航的切換

$route為當前router跳轉物件，裡面可以獲取name、path、query、params等

$router為VueRouter例項，想要導航到不同URL，則使用$router.push方法

back：回退一步 //this.$router.back();

forward：前進一步，這兩種都只能前進或者後退一步 //this.$router.forward();

go：指定前進回退步數 //this.$router.go(-2);如果為0，則是重新整理當前頁面

push：導航到不同url，向history棧新增一個新的記錄，用的比較多

this.$router.push('/document');或下面的用法：

this.$router.push({ path:'/document',query:{info:'follow'} });

replace：導航到不同url，替換history棧中當前記錄

十：導航鉤子函式

導航發生變化時，導航鉤子主要用來攔截導航，讓它完成跳轉或者取消

執行鉤子函式位置：

router全域性

單個路由

元件中

鉤子函式：

router例項上（全域性鉤子函式，所有導航通用）：beforeEach、afterEach

單個路由中（只在訪問定義beforeEnter的那個元件導航上才會觸發）：beforeEnter

元件內的鉤子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

鉤子函式接收的引數：

to：要進入的目標路有物件，到哪裡去

from：正要離開導航的路有物件，從哪裡來

next：用來決定跳轉或取消導航，只有執行改函式才會渲染要進入的元件

案例1：定義全域性鉤子函式，只要有導航切換的地方就會觸發，寫在index.js路由配置檔案下

let router = new VueRouter({})

//進入路由前

router.beforeEach( ( to,from,next )=>{  

    if( to.meta.login ){  //要進入的元件需要先進行登入

        console.log(to);

        next('/login');  //如果沒有登入就重定向到登入頁

    }else{

        next();  //已經登入，就渲染要進入的元件內容

    }

} )

//進入路由後

router.afterEach( ( to,from )=>{  //這裡不需要next了，因為已經進入了

    if( to.meta.title ){  //切換不同的元件，頁面title改變為對應的值

        window.document.title=to.meta.title;

    }else{

        window.document.title='myTitle';  //注意這裡document前面需要加上window，否則訪問不到

    }

} )

index.js

{

    path:'home',

    component:'home',

    meta:{

        index:1,

        login:true,

        title:'home'

    }

}

案例2：定義單個路由鉤子函式，只在進入該路由導航時才執行該鉤子函式，寫在路由配置裡

{

    path:'/document',

    conponent:'document',

    beforeEnter(to,from,next){

        next();  //執行了這個才會渲染元件

    }

}

案例3：定義元件內的鉤子函式，進入該元件時執行該鉤子函式，寫在元件內

比如：about.vue元件

<script>

export default({

    data(){

        msg:'改變前',

        beforeRouteEnter( to,from,next ){

            //next();  //執行了這個才會渲染元件

            console.log(this);  //this是undefined，所以不能透過this.msg獲取data，可以透過next的回撥函式

            next( (vm)=>{

                vm.msg='改變了';

            } )

        },

        beforeRouteUpdate( to,from,next ){

            //next  //寫了才會更新

        },

        beforeRouteLeave( to,from,next ){

            //next();  //寫了這個，才會從當前導航離開，否則會一直停留在當前導航頁

        }

    }

})

</script>

十、vue-cli專案實戰

1、多個元件，將每個元件所需要的樣式，抽離出來，放在assets/css/資料夾下面（assets資料夾放資原始檔：css/js/img），

建立css入口檔案app.css

然後在其中import引入全部的元件樣式檔案

然後在main.js裡面，import這個app.css檔案，// import './assets/css/app.css'

即可在專案中引入全部css檔案( webpack會幫助引入 )

2、components資料夾放公共元件，views資料夾放每個頁面獨立的元件

3、libs：公共庫，封裝的js或者第三方工具庫放在這裡面

怎麼使用自定義的庫呢：

首先在main.js引入：import Utile from './lib/utils'

然後註冊到Vue例項：Vue.use( Utile )

最後：就可以在每個元件，透過this訪問到$local物件，物件上面有save和fetch兩個方法

如果在元件內部獲取不到this，可以透過router.app.$local來獲取$local物件

4、

十一、專案知識點集結

1、$refs的用法

<input type="text" class="input1" ref="input1"/>

一般來講，獲取DOM元素，需document.querySelector(".input1").value獲取這個dom節點的值

用ref繫結之後，this.$refs.input1.value 就可以

2、

vue-router教程

router.beforeEach( ( to,from,next )=>{  

    if( to.meta.login ){ 

        console.log(to);  //這個是要進入的路由資訊物件

    }

}

to物件裡面有一個：matched陣列Array[2]，包含當前路由所有巢狀路徑片段的路由資訊，包括自己的資訊和父路由的資訊

3、some()方法

Array.some(function( item ){})

用於檢測陣列中的元素是否滿足指定條件（函式提供），會依次執行陣列的每個元素

如果有一個元素滿足條件，則表示式返回true , 剩餘的元素不會再執行檢測

如果沒有滿足條件的元素，則返回false

4、導航鉤子函式，主要是用在進行導航是否跳轉或者攔截的一些操作，比如點選導航，使用者是否需要登入才能跳轉還是說可以直接進行跳轉

有三個地方可以寫導航鉤子函式

全域性、單個路由、單個元件中

5、開發環境頁面完成之後，使用命令：npm run build打包專案，生成dist資料夾上線

預設是把dist資料夾下面的所有檔案放在伺服器的根目錄下

但是，如果不是放在根目錄下，而是伺服器的二級目錄下，那麼就得配置config/index.js檔案，裡面的assetsPublicPath屬性，改為二級目錄名稱即可

6、頁面上線之後，開啟頁面，然後重新整理會出現404，需要配置apache裡的httpd.conf檔案

刪除...前面的#號，釋放該模組...具體看影片，只要是404，都重定向到index.html

©著作權歸作者所有：來自51CTO部落格作者xxxpjgl的原創作品，如需轉載，請註明出處，否則將追究法律責任