2020-06-20 Vue

★vue-router-動態(tài)路由

概念：不同的路由地址，需要指向同一個(gè)組件炕倘，這樣的路由規(guī)則的實(shí)現(xiàn)钧大，就叫動態(tài)路由。
換一句話：你定義的路由規(guī)則罩旋，需要匹配到不同的地址啊央。

代碼演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>

      // 文章列表組件配置對象
      const List = {
        template:`<div>
          <h1>文章列表</h1>
          <router-link to="/article/101">文章1</router-link>  
          <router-link to="/article/102">文章2</router-link>  
          <router-link to="/article/103">文章3</router-link>  
        </div>`
      }
      // 文章詳情組件配置對象
      const Article = {
        // $route 是vue實(shí)例上的數(shù)據(jù)對象,和data中數(shù)據(jù)的使用時(shí)一樣的
        // $route.params 獲取路徑傳參的（動態(tài)路由傳參的）這是一個(gè)對象
        // $route.params 對象中的數(shù)據(jù)：鍵 根據(jù)path中的參數(shù)名稱  值 地址欄上的參數(shù)數(shù)據(jù)了
        template: `<div><h1>文章詳情</h1> {{$route.params.articleId}}</div>`
      }

      // 路由規(guī)則
      const routes = [
        {path: '/', component: List},
        {path: '/article/:articleId', component: Article}
      ]

      // 初始化
      const router = new VueRouter({ routes })

      const vm = new Vue({
        el: '#app',
        // 掛載
        router
      })
    </script>
  </body>
</html>

總結(jié)：

  • 規(guī)則 {path: '/article/:articleId', component: Article}
  • 參數(shù) $route.params.articleId

★vue-router-屬性to

to屬性可以寫很多種形式的路徑眶诈。

例如：

  • to="/article" 靜態(tài)的to屬性
  • :to="{path:'/article',query:{id:101}}" === to="/article?id=101"
  • :to="{name:'article',params:{articleId:101}}" === to="/article/101"
    • 路由規(guī)則的名稱 {name:'article', path: '/article/:articleId', component: Article}

代碼演示：

鍵值對

      // 參數(shù)方式：鍵值對  /article?id=101
      const List = {
        data () {
          return {
            id: 10010
          }
        },
        template: `<div>
          <h1>列表</h1>
          <!--<router-link to="/article?id=101">鍵值對傳參</router-link>--> 
          <!--<router-link :to="'/article?id='+id">鍵值對傳參</router-link>-->
          <router-link :to="{path:'/article',query:{articleId:id}}">鍵值對傳參</router-link>
        </div>`
      }
      const Item = {
        // $route  vue實(shí)例下的數(shù)據(jù)，代表路由信息對象瓜饥，例如傳參信息
        // 獲取鍵值對傳參  $route.query
        template: `<div>
          <h1>選項(xiàng) {{$route.query.articleId}}</h1>
        </div>`
      }

      const router = new VueRouter({
        routes: [
          {path: '/', component: List},
          {path: '/article', component: Item}
        ]
      })

路徑上

// 參數(shù)方式：路徑上  /article/101
       const List = {
        data () {
          return {
            id: 10010
          }
        },
        template: `<div>
          <h1>列表</h1>
          <!--<router-link to="/article/10010">路徑上傳參</router-link>-->
          <!--<router-link :to="'/article/'+id">路徑上傳參</router-link>-->
          <router-link :to="{name:'article',params:{id:id}}">路徑上傳參</router-link>
        </div>`
      }
      const Item = {
        template: `<div>
          <h1>選項(xiàng) {{$route.params.id}}</h1>
        </div>`
      }

      const router = new VueRouter({
        routes: [
          {path: '/', component: List},
          {name:'article', path: '/article/:id', component: Item}
        ]
      })

總結(jié)：

  • 怎么樣通過to屬性的對象寫法册养，傳遞鍵值對參數(shù) 獲取 $route.query
  • 怎么樣通過to屬性的對象寫法，傳遞路徑上參數(shù) 獲取 $route.params

★vue-router-編程式導(dǎo)航

以前：

  • 使用 A 標(biāo)簽進(jìn)行跳轉(zhuǎn)压固，如果沒有 A 標(biāo)簽使用 location.href = '地址'

現(xiàn)在：

  • 使用 router-link 進(jìn)行跳轉(zhuǎn)路由球拦，如果沒有 router-link 標(biāo)簽使用 $router.push('靜態(tài)地址'|對象)

概念：

  • 使用js的方式進(jìn)行路由的跳轉(zhuǎn)，就叫：編程式導(dǎo)航

區(qū)別 $route 和 $router 作用：

  • $route 獲取路由信息的（找數(shù)據(jù)）
  • $router 獲取路由實(shí)例的 ( 調(diào)方法 )
  • 以上兩個(gè)對象均可以通過 VUE實(shí)例去訪問

場景：

  • 異步的登錄成功后帐我，需要從登錄跳轉(zhuǎn)到首頁坎炼。
  • 這個(gè)時(shí)候就可以使用編程式導(dǎo)航，通過js進(jìn)行跳轉(zhuǎn)拦键。

代碼：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
</head>

<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>

    // 路由實(shí)例對象
    const router = new VueRouter({
      // 路由規(guī)則
      routes: [
        {
          path: '/login', component: {
            template: `<div>登錄頁面  <button @click="login()">登錄</button></div>`,
            methods: {
              login () {
                // 進(jìn)行登錄
                // 登錄成功
                // 跳轉(zhuǎn)首頁
                // $router 是在vue實(shí)例上的 路由對象谣光，其中有一個(gè)函數(shù)push函數(shù)可以跳轉(zhuǎn)
                this.$router.push('/home')
                // this.$router.push({path:'/home',query:{}})
                // this.$router.push({name:'home',params:{}})
                // push當(dāng)中的對象形式 和to屬性中的對象寫法規(guī)則一致
              }
            }
          }
        },
        {
          path: '/home', name:'home', component: {
            template: `<div>首頁頁面  歡迎您！７椅萄金！</div>`
          }
        }
      ]
    })

    const vm = new Vue({
      el: '#app',
      router
    })
  </script>
</body>

</html>

總結(jié)：

  • 如何通過js進(jìn)行路由跳轉(zhuǎn) $router.push()

★vue-router-重定向

app.get('/login',(req,res)=>{
  // 返回一個(gè)頁面
  // res.send('頁面')  res.json()
  // 重定向函數(shù)  跳轉(zhuǎn)到其他頁面
  // res.redirect('/admin')
})
  • 當(dāng)你訪問的是 a 路徑的時(shí)候，跳轉(zhuǎn)的卻是 b 路徑媚朦。
    代碼演示：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>

      // 路由實(shí)例對象
    const router = new VueRouter({
      // 路由規(guī)則
      routes: [
        // 重定向
        { path: '/', redirect: '/home'  },
        {
          path: '/home', name:'home', component: {
            template: `<div>首頁頁面  歡迎您Ｑ醺摇！询张！</div>`
          }
        }
      ]
    })

      const vm = new Vue({
        el: '#app',
        router
      })
    </script>
  </body>
</html>

總結(jié)：

  • 在vue-router是使用重定向功能 { path: '/', redirect: '/home' },

★vue-router-導(dǎo)航守衛(wèi)

導(dǎo)航守衛(wèi)概念：

  • 在路由跳轉(zhuǎn)的時(shí)候孙乖，可以介入。在跳轉(zhuǎn)的過程中可以做其他的事情份氧。

畫圖：

image.png

業(yè)務(wù)需求：

  • 后臺管理系統(tǒng)的（所有頁面）唯袄，必須要登錄后才能訪問。
  • 如果沒有登錄蜗帜，直接訪問后臺的頁面恋拷，攔截到登錄頁面即可。
  • 如果已經(jīng)登錄厅缺，放行即可蔬顾。

代碼演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>

      const router = new VueRouter({
        routes: [
          {path: '/login', component: { template: '<div>登錄頁面</div>' }},
          {path: '/', component: { template: '<div>管理系統(tǒng)的首頁頁面</div>' }},
          {path: '/setting', component: { template: '<div>管理系統(tǒng)的設(shè)置頁面</div>' }}
        ]
      })

      // 使用導(dǎo)航守衛(wèi)，監(jiān)聽所有的路由跳轉(zhuǎn)
      router.beforeEach((to,from,next)=>{
        // 這個(gè)回調(diào)函數(shù)在路由跳轉(zhuǎn)的時(shí)候會執(zhí)行
        // 模擬一下當(dāng)前的登錄狀態(tài)
        const isLogin = false
        // 判斷登錄的狀態(tài)
        // console.log(to)
        // to 是跳轉(zhuǎn)的目標(biāo)路由對象  to.path 目標(biāo)路徑
        // console.log(from)
        // from 是來自的目標(biāo)路由對象  from.path 來自路徑
        // next 是一個(gè)下一步執(zhí)行函數(shù)：
        // next() 放行
        // next(路徑) 攔截到哪里
        // 如果不是訪問登錄店归，且此時(shí)沒有登錄阎抒，那么跳轉(zhuǎn)登錄頁面
        if (to.path!=='/login' && !isLogin) return next('/login')
        // 如果其他情況一律放行
        next()
      })


      const vm = new Vue({
        el: '#app',
        router
      })
    </script>
  </body>
</html>

總結(jié)：

  • 可以使用導(dǎo)航守衛(wèi)實(shí)現(xiàn)訪問權(quán)限的控制。

★vue-router-路由嵌套

概念：

  • 擁有一級路由消痛，也會有有一級路由對應(yīng)顯示的容器（router-view）
  • 擁有二級路由且叁，也會有有二級路由對應(yīng)顯示的容器（router-view）

場景：

image.png

落地代碼：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
</head>

<body>
  <div id="app">
    <nav>
      <router-link to="/">首頁</router-link>
      <router-link to="/my">我的音樂</router-link>
      <router-link to="/friend">朋友</router-link>
    </nav>
    <div id="page">
      <router-view></router-view>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    // 一級路由對應(yīng)的組件
    const Home = {
      template: `<div>
        <h1>發(fā)現(xiàn)音樂界面</h1>
        <router-link to="/tj">推薦</router-link>
        <router-link to="/ph">排行榜</router-link>
        <router-link to="/gd">歌單</router-link>
        <router-view></router-view>
      </div>`}
    const My = { template: '<b>我的音樂界面</b>' }
    const Friend = { template: '<b>朋友界面</b>' }
    // 二級路由對應(yīng)的組件
    const Tj = { template: '<div>推薦page</div>' }
    const Ph = { template: '<div>排行榜page</div>' }
    const Gd = { template: '<div>歌單page</div>' }

    const routes = [
      {
        path: '/', component: Home, children: [
          { path: '/tj', component: Tj },
          { path: '/ph', component: Ph },
          { path: '/gd', component: Gd }
        ]
      },
      { path: '/my', component: My },
      { path: '/friend', component: Friend }
    ]

    const router = new VueRouter({ routes })

    const vm = new Vue({
      el: '#app',
      router
    })
  </script>
</body>

</html>

總結(jié)：

  • router-view路由標(biāo)簽需要有嵌套關(guān)系
  • 路由規(guī)則也需要嵌套關(guān)系，通過規(guī)則對象中的 children 屬性秩伞，來實(shí)現(xiàn)嵌套關(guān)系配置逞带。

vue-cli-介紹

腳手架：

  • 腳手架是為了保證各施工過程順利進(jìn)行而搭設(shè)的工作平臺欺矫。

vue腳手架：

  • 為了在開發(fā)項(xiàng)目的過程中能夠順利的進(jìn)行而搭建的一個(gè)基礎(chǔ)的項(xiàng)目結(jié)構(gòu)。
  • 它會為我們創(chuàng)建一套展氓，相對標(biāo)準(zhǔn)的項(xiàng)目目錄開發(fā)結(jié)構(gòu)穆趴。
  • 它還可以為我們在項(xiàng)目開發(fā)過程中，提供一些比較便利的開發(fā)輔助的工具遇汞。
    • babel工具 把你寫的ES6語法降級未妹，兼容更多的瀏覽器
    • less解析（sass less）工具 幫你把less解析成csss
    • eslint工具 約束你的代碼風(fēng)格，統(tǒng)一代碼風(fēng)格空入，做代碼風(fēng)格檢查的络它。
    • ....
    • 還集成了webpack工具，包含一個(gè)dev-server工具歪赢，提供一個(gè)預(yù)覽代碼的服務(wù)器
      • 自動刷新瀏覽
      • 熱更新功能

總結(jié)：

  • vue-cli在開發(fā)階段給予我們開發(fā)時(shí)的便利化戳。

  • 讓我們專注實(shí)現(xiàn)業(yè)務(wù)，而不是一些項(xiàng)目開發(fā)的輔助工作埋凯。

  • 文檔 https://cli.vuejs.org/zh/guide/

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末点楼，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子白对，更是在濱河造成了極大的恐慌掠廓，老刑警劉巖，帶你破解...
    沈念sama閱讀 217,657評論 6贊 505
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件躏结，死亡現(xiàn)場離奇詭異却盘，居然都是意外死亡狰域，警方通過查閱死者的電腦和手機(jī)媳拴，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3贊 394
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來兆览，“玉大人屈溉，你說我怎么就攤上這事√剑” “怎么了子巾？”我有些...
    開封第一講書人閱讀 164,057評論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長小压。 經(jīng)常有香客問我线梗，道長，這世上最難降的妖魔是什么怠益？ 我笑而不...
    開封第一講書人閱讀 58,509評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任仪搔，我火速辦了婚禮，結(jié)果婚禮上蜻牢，老公的妹妹穿的比我還像新娘烤咧。我一直安慰自己偏陪，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布煮嫌。 她就那樣靜靜地躺著笛谦，像睡著了一般。 火紅的嫁衣襯著肌膚如雪昌阿。 梳的紋絲不亂的頭發(fā)上饥脑，一...
    開封第一講書人閱讀 51,443評論 1贊 302
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音懦冰，去河邊找鬼好啰。 笑死，一個(gè)胖子當(dāng)著我的面吹牛儿奶，可吹牛的內(nèi)容都是我干的框往。 我是一名探鬼主播，決...
    沈念sama閱讀 40,251評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼闯捎，長吁一口氣：“原來是場噩夢啊……” “哼椰弊！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起瓤鼻，我...
    開封第一講書人閱讀 39,129評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤秉版，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后茬祷，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體清焕，經(jīng)...
    沈念sama閱讀 45,561評論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評論 3贊 335
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年祭犯，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了秸妥。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,902評論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡沃粗，死狀恐怖粥惧，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情最盅，我是刑警寧澤突雪，帶...
    沈念sama閱讀 35,621評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站涡贱，受9級特大地震影響咏删，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜问词，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一督函、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦侨核、人聲如沸草穆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0贊 22
  • 一樁弒父案搓译，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽悲柱。三九已至，卻和暖如春些己，著一層夾襖步出監(jiān)牢的瞬間豌鸡，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工段标， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留涯冠，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,025評論 2贊 370
  • 代替公主和親
    正文 我出身青樓逼庞，卻偏偏與公主長得像蛇更，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子赛糟，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評論 2贊 354