Vue router 的路由的跳轉方式 以及原理

一、路由概念

       路由：網絡工程術語

        互聯網中把信息從源地址發送到目的地

二、路由進化的三個階段

    2.1  後端路由

           頁面請求不同路徑的內容時，交給服務器來處理，服務器渲染好整個頁面並且返回客戶端

   2.2  前端路由

           後端提供api，前端使用ajx獲取數據，通過javascript將數據渲染到頁面

          前後端更清晰，明了

   2.3 單頁面富應用  simple page application

        spa在前後端分離基礎上加前端路由

       由前端維護路由規則（前端url-->頁面映射）

三、前端路由url的處理方式

      3.1 URL的hash->錨點（#）  

            改變window.location的href的屬性

            直接賦值location.hash 來改變href，頁面不刷新

      3.2 html5的history

           history.pushState({},'','home')//和棧原理比較類似

           history.back()//返回到上一頁

          history.replaceState({},'','home')//不留痕跡

          history.go(-1)//返回或者直接到指定的頁面

          history.forward()//返回到指定頁面

四、手寫router 

        4.1  新增Router文件夾->新增index.js文件

        4.2  開始在index.js寫入相關內容

//配置路由相關信息
 import VueRouter from 'vue-router'
 import Vue From 'vue'

//通過vue.use(插件) 安裝插件
Vue.use(VueRouter)

//創建VueRouter對象
const routes=[],
const router = new VueRouter({
//配置路由和組件映射關係
     routes,   
     model:history         //3.2
     linkActive:active       // router-link 補充
})
//將router 對象傳入vue實例
export default router


//main.js 使用

import router from './router/index.js'

  new Vue ({
      el:'#app',
      router,
      render:h=>h(app)
})

五、使用vue-router 步驟

      5.1 創建路由組件  Home.vue

//簡單的一個組件

      5.2 配置路由映射

//router->index.js

const routes=[{
    path:'/home',
    component:'Home'
 },{
   path:'/about',
   component:'About'
   }
],

     5.3   使用路由     

//App.vue

   ****router-link 補充

tag：可指定之後渲染成什麼組件

replace：不會留下history的記錄

linkActive  ：可以改變一些屬性

在如下樣式可以使用

    六、通過代碼實現路由跳轉

七、動態路由使用vue-router

//動態獲取用戶信息
//用computed獲取數據
computed:{
   userId(){
    return this.$route.params.id
  }
}

//添加路由
const router=[{
       path:'user/:id',
       component:'User' 
   }]


//在vue渲染
用戶

八、vue-router 打包文件

dist  --->   js  --->appxxxx.js =>應用程序開發的所有代碼

                           mainxxx.js  =>為打包的代碼作為底層支撐

                         vendorxx.js =>第三方vue/vue-router/axios。。。

  ps：vue-router 懶加載 一般根據路由對應的組件分割打包會將組件分別打包，被訪問時才加在對應組件，有幾個組件就打包成幾個js文件+如上三個文件

九、嵌套路由（子組件）

{
 path:'/home'
 component:Home,
    children:[
    {
      path:'new',
      component:News
     },
    {
      path:'message',
      component:Message
     }
    ]

十、vue-router 參數傳遞

     10.1  parmas 類型

              配置路由格式：'/user/:id

             傳遞方式：path :'"/user/"+id'

            傳遞後形成路徑：/user/123

     10.2 query類型         

             配置路由格式：'/profile/'

             傳遞方式：query  -- key 

            傳遞後形成路徑：/proflie?name=aaa

     10.3 事件傳遞參數

用戶
檔案



methods:{
  userClick(){
    this.$router.push('/user/'+this.id)
  },
  profileClick(){
      this.$router.push({
        path:'/profile',
        query:{ 
          name:'koko',
          age:18,
          height:188,
      })
  }
}

vur-router 導航守衛

  導航守衛就是路由跳轉過程中的一些鉤子函數

//index.js

router.beforeEach((function(to,from,next)=>{
    document.title = to.mathed[0].meta.title;
    next()
})


routes:[{
    path:'/about',
    component:About,
    meta:{
      title:'關於'
   }, 
}]

vue-router 路由獨享守衛

單個路由配置的時候設置鉤子函數

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

全局路由鉤子：beforeEach(to,from, next)、beforeResolve(to,from, next)、afterEach(to,from)；

獨享路由鉤子：beforeEnter(to,from, next)；

組件內部路由鉤子：beforeRouteEnter(to,from, next)、beforeRouteUpdate(to,from, next)、beforeRouteLeave(to,from, next)