分析Vue-Router路由與配置-創(chuàng)新互聯(lián)

這篇文章主要介紹“分析Vue-Router路由與配置”，在日常操作中，相信很多人在分析Vue-Router路由與配置問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”分析Vue-Router路由與配置”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),余杭企業(yè)網(wǎng)站建設(shè),余杭品牌網(wǎng)站建設(shè),網(wǎng)站定制,余杭網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,余杭網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

現(xiàn)在的很多應(yīng)用都流行SPA應(yīng)用（singe page application) 。傳統(tǒng)的項目大多使用多頁面結(jié)構(gòu)，需要切換內(nèi)容的時候我們往往會進行單個html文件的跳轉(zhuǎn)，這個時候因受到網(wǎng)絡(luò)、性能的影響，瀏覽器會出現(xiàn)不定時間的空白界面，用戶體驗不好。而單頁應(yīng)用則是用戶通過某些操作更改地址欄url之后，動態(tài)的進行不同模板內(nèi)容的無刷新切換，用戶體驗好。而在vue2.0版本后，vue官方推出vue-router插件來實現(xiàn)單頁面的路由跳轉(zhuǎn)，內(nèi)部原理就是通過組件之間的切換（組件的卸載與安裝）去實現(xiàn)整個頁面無刷新的效果。

一．項目引入路由并配置：

1.在vue項目中，通過cnpm或者yarn的方式進行vue-router的安裝

cnpm i vue-router -S

yarn add vue-router -S

       2.接下來需要在入口文件main.js里面進行路由的引入與注冊

        import Vue from 'vue'

        import Router from 'vue-router'

        Vue.use(Router)

3. 創(chuàng)建router路由器

    new Router({

      routes:[

        {path:"",component:}

      ]

    })

4. 創(chuàng)建路由表并配置在路由器中

    var routes = [

//path為路徑，component為路徑對應(yīng)的路由組件

        {path,component}

    ]

    new Router({

        routes

    })

5. 在根實例里注入router,目的是為了讓所有的組件里都能通過this.$router、this.$route來使用路由的相關(guān)功能api

 new Vue({

    el: '#app',

    router,

    template: '<App/>',

    components: { App }

    })

6. 利用router-view來指定路由切換的位置

7. 使用router-link來創(chuàng)建切換的工具，會渲染成a標簽，添加to屬性來設(shè)置要更改的path信息，且會根據(jù)當前路由的變化為a標簽添加對應(yīng)的router-link-active/router-link-exact-active（完全匹配成功）類名

<router-link to="main">main</router-link>

<router-link to="news">news</router-link>

.router-link-active{

    color:red;

}

項目中多級路由配置：

在創(chuàng)建路由表的時候，可以為每一個路由對象創(chuàng)建children屬性，值為數(shù)組，在這個里面又可以配置一些路由對象來使用多級路由，注意：只在一級路由的path前加 '/ '

const routes = [

  {path:'/home,component:Home},

  {path:'/list',component:List,children:[

    {path:'inner',component:Inner},

    {path:'outer',component:Outer}

  ]},

]

二級路由組件的切換位置依然由router-view來指定（指定在父級路由組件的模板中）

<router-link to='/home/inner'>inner</router-link>

<router-link to='/home/outer'>outer</router-link>

<router-view></router-view>

      但是這樣發(fā)現(xiàn)當路由路徑多級的時候，不利于快速定位路由匹配的組件。所以，可以通過命名路由的方式去實現(xiàn)以上代碼。

我們可以給路由對象配置name屬性，當我們在跳轉(zhuǎn)的時候直接寫name:inner就會快速的找到此name屬性所對應(yīng)的路由，不需要寫大量的urlpath路徑了。如下所示：

{path:'inner',component:Inner,name:'inner'}

這樣的話，我們就可以方便的根據(jù)路由的不同進行組件之間的映射。但是，做大型項目開發(fā)的時候，我們也會發(fā)現(xiàn)很多的路由寫在routes這個里面，會讓router這個文件變得很大不利于維護管理。除此之外，如果通過這樣的方式還會導致當用戶打開首頁的話，因為webpack打包的時候，加載內(nèi)容異常的多導致打開速度很慢。所以我們需要對我們的路由采取懶加載的方式進行引入：

const routes = [

homeRouter

 ]

//homeRouter.js文件里面

export defult {

  Name:’homeRouter’,

  Path:’/home’

  component:() => import('./my-async-component')}

}

Vue-Router的路由守衛(wèi)：

在項目開發(fā)中，我們經(jīng)常會在路由跳轉(zhuǎn)前后做一些操作。例如我們可以通過利用vue-router里面提供的路由守衛(wèi)結(jié)合axios攔截器實現(xiàn)項目的登錄攔截等操作。Vue-router里面提供的路由守衛(wèi)可以分為三大類，分別是全局路由守衛(wèi)、單個的路由鉤子的路由守衛(wèi)、路由組件內(nèi)部的路由守衛(wèi)。好，我們依次來看：

通過 router.beforeEach 或者router.afterEach注冊一個全局守衛(wèi)：

1-1

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

    //會在任意路由跳轉(zhuǎn)前執(zhí)行，next一定要記著執(zhí)行，不然路由不能跳轉(zhuǎn)了

  next()

})

守衛(wèi)方法需要接受三個參數(shù)：to、from、next

to:即將要進入的目標對象

From:當前導航正要離開的路由

Next: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

1-2

//會在任意路由跳轉(zhuǎn)后執(zhí)行  

Router.afterEach((to,from)=>{

})

單個路由鉤子守衛(wèi)：

只有beforeEnter，在進入前執(zhí)行，to參數(shù)就是當前路由

 routes: [

    {

      path: '/foo',

      component: Foo,

      beforeEnter: (to, from, next) => {

        // next也是必須要寫的

      }

    }

  ]

路由組件鉤子守衛(wèi)：

 beforeRouteEnter (to, from, next) {

    //內(nèi)部不能調(diào)用this  當這個路由調(diào)用時，組件沒有被初始化

  },

  beforeRouteUpdate (to, from, next) {

    // 內(nèi)部可以訪問組件實例 `this`

//路由內(nèi)部動態(tài)參數(shù)改變了，組件被復用的時候調(diào)用（/list/1跳入/list/2,詳情組件復用的時候）

  },

  beforeRouteLeave (to, from, next) {

    // 可以訪問組件實例 `this`  路由離開這個組件的時候進入

  }

到此，關(guān)于“分析Vue-Router路由與配置”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

分享名稱：分析Vue-Router路由與配置-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://muchs.cn/article28/dcjpcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、服務(wù)器托管、網(wǎng)站排名、營銷型網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司