動態(tài)路由

# 路由的基本使用
  ## html(主入口文件)
  <!-- 使用 router-link 組件來導(dǎo)航. -->
  <!-- 通過傳入 `to` 屬性指定鏈接. -->
  <!-- <router-link> 默認(rèn)會被渲染成一個 `<a>` 標(biāo)簽 -->
  <router-link to="/foo">Go to Foo</router-link>
  <router-link to="/bar">Go to Bar</router-link>
  <!-- 路由匹配到的組件將渲染在這里 -->
  <!-- 放一個路由視圖（路由坑） -->
  <router-view></router-view>

  ## js(路由規(guī)則設(shè)置)
  1. import Vue from 'vue'                //
  2. import VueRouter from 'vue-router'   //引入vue-router依賴包
  3. import PageA from './views/PageA.vue'//引入路由級別的頁面組件
  4. Vue.use(VueRouter)                   //使用 Vue.use(VueRouter) 去調(diào)用路由這款插件
  5. const router = new VueRouter({       //實例化router對象状共，并配置 routes 選項（路由規(guī)則）
      routes: [  
# 動態(tài)路由
      {                     // 動態(tài)路徑參數(shù) 以冒號開頭
        path: '/user/:id', //參數(shù)值會被設(shè)置到 this.$route.params糊饱，使用對應(yīng)的id名獲取調(diào)用$route.params.id
        component: User,
# 起別名
        alias: '/b'         //別名為b扭勉，雖然url上是/b但實際路徑是/user/：id 
      }肆汹，
# 路由嵌套             
    在路由中嵌套子路由就是路由嵌套              
      {                             數(shù)組對象方式
        path: '/a',                 
        component: PageA，          //使用對應(yīng)的引入的路由組件
        children: [             // 配置嵌套的子路由
          {
            //     /index/home
            path: 'home', // 子路由時 不以 / 開頭筐摘，會自動攜帶父路由的路徑
            name: 'home',
            component: Home,
          }
        ]
      }
    ]
  })
export default router       //把路由暴露出去
# 響應(yīng)參數(shù)變化
當(dāng)使用路由參數(shù)時范抓，例如從 /user/foo 導(dǎo)航到 /user/bar蘸泻，原來的組件實例會被復(fù)用。
因為兩個路由都渲染同個組件脱篙，比起銷毀再創(chuàng)建娇钱，復(fù)用則顯得更加高效。
不過涡尘，這也意味著組件的生命周期鉤子不會再被調(diào)用忍弛。
解決方案
1.watch監(jiān)聽
    '$route' (to, from) {
      // 對路由變化作出響應(yīng)...
    }
2.導(dǎo)航守衛(wèi)
beforeRouteUpdate (to, from, next) {
  // react to route changes...
  // don't forget to call next()
}

# 捕獲所有路由
{
  // 會匹配所有路徑
  path: '*'，
  redirect:'/a'   //重定向到a
}
注考抄，只能寫到最后细疚，不然后面路由代碼不會執(zhí)行

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市川梅，隨后出現(xiàn)的幾起案子疯兼，更是在濱河造成了極大的恐慌，老刑警劉巖贫途，帶你破解...
沈念sama閱讀 222,729評論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件吧彪，死亡現(xiàn)場離奇詭異，居然都是意外死亡丢早，警方通過查閱死者的電腦和手機姨裸，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,226評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來怨酝，“玉大人傀缩，你說我怎么就攤上這事∨┾” “怎么了赡艰？”我有些...
開封第一講書人閱讀 169,461評論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長斤葱。經(jīng)常有香客問我慷垮，道長揖闸，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 60,135評論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任料身，我火速辦了婚禮汤纸，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘惯驼。我一直安慰自己蹲嚣，他們只是感情好，可當(dāng)我...
茶點故事閱讀 69,130評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布祟牲。她就那樣靜靜地躺著隙畜，像睡著了一般。火紅的嫁衣襯著肌膚如雪说贝。梳的紋絲不亂的頭發(fā)上议惰，一...
開封第一講書人閱讀 52,736評論 1贊 312
城市分裂傳說
那天，我揣著相機與錄音乡恕，去河邊找鬼言询。笑死，一個胖子當(dāng)著我的面吹牛傲宜，可吹牛的內(nèi)容都是我干的运杭。我是一名探鬼主播，決...
沈念sama閱讀 41,179評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼函卒，長吁一口氣：“原來是場噩夢啊……” “哼辆憔！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起报嵌，我...
開封第一講書人閱讀 40,124評論 0贊 277
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤虱咧，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后锚国，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腕巡，經(jīng)...
沈念sama閱讀 46,657評論 1贊 320
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,723評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年血筑，在試婚紗的時候發(fā)現(xiàn)自己被綠了绘沉。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,872評論 1贊 353
活死人
序言：一個原本活蹦亂跳的男人離奇死亡豺总，死狀恐怖梆砸，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情园欣，我是刑警寧澤，帶...
沈念sama閱讀 36,533評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布休蟹，位于F島的核電站沸枯，受9級特大地震影響日矫，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜绑榴，卻給世界環(huán)境...
茶點故事閱讀 42,213評論 3贊 336
男人毒藥：我在死后第九天來索命
文/蒙蒙一哪轿、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧翔怎，春花似錦窃诉、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,700評論 0贊 25
一樁弒父案飘痛，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至容握，卻和暖如春宣脉，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背剔氏。一陣腳步聲響...
開封第一講書人閱讀 33,819評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工塑猖，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人谈跛。一個月前我還...
沈念sama閱讀 49,304評論 3贊 379
代替公主和親
正文我出身青樓羊苟，卻偏偏與公主長得像，于是被迫代替她去往敵國和親感憾。傳聞我的和親對象是個殘疾皇子蜡励，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,876評論 2贊 361

動態(tài)路由

推薦閱讀更多精彩內(nèi)容