談一談對vue-router的簡單理解

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,讓構建單頁面應用變得易如反掌。包含的功能有:javascript

  • 嵌套的路由/視圖表
  • 模塊化的、基於組件的路由配置
  • 路由參數、查詢、通配符
  • 基於 Vue.js 過渡系統的視圖過渡效果
  • 細粒度的導航控制
  • 帶有自動激活的 CSS class 的連接
  • HTML5 歷史模式或 hash 模式,在 IE9 中自動降級
  • 自定義的滾動條行爲

上面是vue-router官方的介紹,接下來我總結一下,本身平時用的vue-router的相關知識,適合入門級別的小白白們,高手請繞(饒)過vue


在使用vue-router以前,咱們首先要把他整合到vue腳手架中,java

(注意:本文的講解基礎是已經默認你安裝好了vue-cli那一套東西)vue-router

vue-router 安裝 npm install vue-router --savevue-cli

src/router/index.js文件下寫入如下代碼npm

import Vue from 'vue'
import VueRouter from 'vue-router'

//在vue中註冊VueRouter
Vue.use(VueRouter);

//導入路由映射的組件

//普通導入方式
import  comA  from '@components/comA'

//須要懶加載的導入方式(所謂懶加載就是說,一開始不會加載全部的資源致使等待時間太長,而是當你切換導航的時候,相關組件裏面的資源會陸續加載)
const comB = resolve=>require(['@components/comB'],resolve);



//而後寫出路由映射關係

const routes = [
    {
      path:'/',
      name:'home',
      component:home,
    },
    {
      path:'/about',
      name:'about',
      component:about,
      children:[
        {
            path:'aboutA' //其實至關於 path:'/about/aboutA'
        },{
            path:'aboutB',
        }
      ]
    }
]

複製代碼

這就是比較簡單和比較全的結構了,除去(參數和鉤子,後面講)。 寫完映射關係,而後建立router實例,而且吧映射關係傳進去後端

const router = new VueRouter({
        routes
    })
    
    //須要注意的是,全局路由鉤子就是要寫在router實例上的,以下
    
    router.beforeEach((to, from, next)=>{
        ...
        next();
    })
複製代碼

接下來,咱們來看看vue-router的模式瀏覽器

vue-router默認使用的是hash模式,就是在路由跳轉的時候,會有不少 #,看起來不太美觀,所以咱們可使用 history模式 ,這種模式充分利用了 history.pushStateAPI來完成URL跳轉而無需從新加載頁面,從而提升了用戶體驗。可是,當你直接訪問 www.root.com/home/page1的時候,瀏覽器就會真的去請求該地址,若是後端沒有相關的配置,那麼就會返回404,就很尷尬了,因此必定要和後端配合好。ide

模式基本的樣子就是下面的樣子模塊化

const router = new VueRouter({
        mode:"history",
        routes
    })
複製代碼

路由傳參

通常路由有兩種傳參方式,分爲 paramsquery,先看看params吧,就用官網的例子吧

const User = {
  template: '<div>{{$route.params.id}}</div>'
}

const router = new VueRouter({
  routes: [
    // 動態路徑參數 以冒號開頭
    { path: '/user/:id', component: User }
  ]
})

複製代碼

在組件內使用$route會使 組件與之高度耦合,從而組件只能在特定的URL上使用,他的靈活性受到了限制,所以可使用props使他們解耦,

const User = {
    props:['id'],
    template:`<div>{{id}}</div>`
}

const router = new VueRouter({
    routes:[
        {
            path:'/user/:id',
            component:User,
            props:true
        },
        
        //對於包含命名視圖的路由,你必須分別爲每個命名路由添加 props 選項,以下
        {
            path:'/user/:id',
            components:{default:User,sidebar:SideBar},
            props:{default:true,sidebar:false}
        }
    ]
})

複製代碼

這樣一來就極大的增長了組件的靈活性,更加易於重用和測試

params 和 query

query是這樣用的

//傳參
    this.$router.push({
        name:'home',
        query:{
            id:id
        }
    })
    
    //接受參數
    
    this.route.query.id
    
複製代碼

params和query十分類似,

//傳參
    this.$router.push({
        name:'home',
        params:{
            id:id
        }
    })
    
    //接受參數
    
    this.route.params.id
    
複製代碼

這裏有一點是須要注意的,那就是使用 params的時候,是不可使用path的,由於params自己就是path動態路徑的構成元素,這樣會發生矛盾。

爲了保持一致性,query 和 params傳參的時候,都儘可能 使用nama來進行區分。


參數的位置 通常狀況下 this.$router.pushrouter-link裏面的to的參數類型是如出一轍的。以下

<router-link to:"/home"></router-link>
    //至關於
    
    this.$router.push("/home");
    
    {
        name:"home",
        path:'/home/:id',
        componet:Home
    }
    
    <router-link to:"{name:"home",params:{id:"lala"}}"
    //至關於
    this.$router.push({
        name:"home",
        params:{
            id:"lala"
        }
        
    })

複製代碼

以上就是 tothis.$router.push參數一直的說明,接下來 咱們就 系統的看一下,路由鉤子;

路由鉤子

全局路由鉤子

beforeEach and afterEach

const router = new VueRouter({
        ...
    })
    //須要注意的是,全局路由鉤子,是路由實例上的,也就是上面的那個 router上的,不要弄混哦
    
    router.beforeEach((to, from, next)=>{
        // to 將要到達的路由對象
        // from 目標路由對象
        // next()進行下一步
        // next(false) 中斷當前的跳轉,通常用於 提醒用戶是否確認進入某頁面,用戶取消
        //next('/') 或者 next({name:"home",params:{}})
    })    
    
    router.afterEach((to,from)=>{
        ...
        //導航已經結束,所以沒有next
    })
    

複製代碼

路由映射關係上的 鉤子

beforeEnter and afterEnter

const router = new VueRouter({
      routes:[
        {   name:home,
            path:'/home',
            component:Home,
            beforeEnter:(to,from, next) =>{
                ...
            },
            afterEnter:(to, from)=>{
                ...
            }
        }
      ]
  })

複製代碼

基本上和全局路由鉤子的用法同樣

組件內的鉤子

beforeRouterEnter and beforeRouterUpdate(2.2 add) and beforeRouterLeave

export default{
        data(){
            return {
                ...
            }
        },
        beforeRouterEnter (to, from, next){
            //因爲在使用這以前,導航還未確認,實例尚未被建立,因此這裏面是不能調用this的
        },
        beforeRouterUpdate(to,from,next){
            //次函數的觸發規則是,在相似 /home/:id 這樣的動態路由中,因爲id的變化,可是組件仍然不變的狀況下,即可以使用
            //此時實例已經建立完成,所以,this能夠登上舞臺
            
        },
        beforeRouterLeave(to,from,next){
            //導航離開組件對應路由會觸發這個函數
            //能夠訪問this
        }
    }
        


複製代碼

這就是我對vue路由的,一些理解和總結,但願可以幫助剛剛入門的小夥伴們,一塊兒加油,堅持寫文章,將來一片光明

相關文章
相關標籤/搜索