路由原理

• 傳統(tǒng)開發(fā)方式 url改變后 立刻發(fā)起請求，響應(yīng)整個頁面，渲染整個頁面
• SPA 錨點值改變后 不會發(fā)起請求,發(fā)起ajax請求,局部改變頁面數(shù)據(jù)
  • 頁面不跳轉(zhuǎn) 用戶體驗更好

SPA

• single page application(單頁應(yīng)用程序)
• 前端路由
  • 錨點值監(jiān)視
  • ajax獲取動態(tài)數(shù)據(jù)
  • 核心點是錨點值
• 前端框架 Vue/angular/react都很適合開發(fā)單頁應(yīng)用

基本使用

• vue-router
• 其是vue的核心插件
• 1:下載 npm i vue-router -S
• 1.2(重要):安裝插件Vue.use(VueRouter);
• 2:在main.js中引入vue-router對象 import VueRouter form './x.js';
• 3:創(chuàng)建路由對象 var router = new VueRouter();
• 4:配置路由規(guī)則 router.addRoutes([路由對象]);
  • 路由對象{path:'錨點值',component:要(填坑)顯示的組件}
• 5:將配置好的路由對象交給Vue
  • 在options中傳遞-> key叫做 router
• 6:留坑(使用組件) <router-view></router-view>

router-link

• to
• 幫助我們生成a標簽的href
• 錨點值代碼維護不方便，如果需要改變錨點值名稱
  • 則需要改變 [使用次數(shù) + 1（配置規(guī)則）] 個地方的代碼

命名路由

• 1:給路由對象一個名稱 { name:'home',path:'/home',component:Home}
• 2:在router-link的to屬性中描述這個規(guī)則
  • <router-link :to="{name:'home'}></router-link>"
  • 通過名稱找路由對象，獲取其path，生成自己的href
• 大大降低維護成本，錨點值改變只用在main.js中改變path屬性即可

階段總結(jié)

• vue-router使用步驟 : 1:引入 2:安裝插件 3:創(chuàng)建路由實例 4:配置路由規(guī)則 5:將路由對象關(guān)聯(lián)vue 6:留坑
• router-link to="/xxx" 命名路由
  • 在路由規(guī)則對象中 加入name屬性
  • 在router-link中 :to="{ name:"xxx’} "

• 生僻API梳理:

  • Vue.use(插件對象); // 過程中會注冊一些全局組件,及給vm或者組件對象掛在屬性

  • 給vm及組件對象掛在的方式 : Object.defineProperty(Vue.prototype,’$router’,{

    ? get:function () {
    ? return 自己的router對象;

    ? }

    })

參數(shù)router-link,

• Vue.prototype.xxx = {add:fn}
• 所有組件中，使用this.xxx就能拿到這個對象
• 查詢字符串
  • 1:配置:to="{name:'detail',query:{id:hero.id} }"
  • 2:規(guī)則 {name:'detail',path:'/detail',component:Detail}
  • 3:獲取 this.$route.query.id
  • 4:生成 <a href="/detail?id=1">
• path方式
  • 4:生成 <a href="/detail/1">
  • 1:配置 :to="{name:'detail',params:{id:hero.id} }"
  • 2:規(guī)則 { name:'detail',path:'/detail/:id'}
  • 3:獲取 this.$route.params.id
• 查詢字符串配置參數(shù)
  • router-link一次
  • 獲取的時候一次
• path方式配置參數(shù)
  • router-link一次
  • 規(guī)則配置的時候聲明位置
  • 獲取的時候一次
• 總結(jié)書寫代碼注意事項
  • path方式需要在路由規(guī)則中聲明位置

vue-router中的對象

• $route 路由信息對象,只讀對象
• $router 路由操作對象,只寫對象

嵌套路由

• 市面上所謂的用單頁應(yīng)用框架開發(fā)多頁應(yīng)用
  • 嵌套路由
• 案例
  • 進入我的主頁顯示：電影、歌曲
• 代碼思想
  • 1:router-view的細分
    • router-view第一層中，包含一個router-view
  • 2:每一個坑挖好了，要對應(yīng)單獨的組件
• 使用須知: 1:router-view包含router-view 2:路由children路由

知識點介紹

• 路由meta元數(shù)據(jù) -> meta是對于路由規(guī)則是否需要驗證權(quán)限的配置
  • 路由對象中 和name屬性同級 { meta:{ isChecked:true } }
• 路由鉤子 -> 權(quán)限控制的函數(shù)執(zhí)行時期
  • 每次路由匹配后, 渲染組件到router-view之前
  • router.beforeEach(function(to,from,next) { } )

總結(jié)

以上是生活随笔為你收集整理的vue从入门到精通之进阶篇（一）vue-router基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。