vue之vue-router嵌套路由

1、定義路由

  routes: [

    {
      path: '/product',  //第一層路由
      name: 'product',
      component: Vproductcontent,//父組件渲染的是子組件的內容<routerview/>寫在父組件中
      children:[
        {
          path: '/product/hotproduct', //第二層路由
          name: 'hotproduct',
          component: Vhotproduct,
          children:[
            {
              path: '/product/hotproduct/detail/:id(\\d+)',  //第三層路由
              component: Vhotproductdetail,
            }
          ]
        },

      ]
    },


  ]

2、使用 router-link 組件來導航

在左側菜單欄的Vleft組件中使用router-link

    <ul class="nav nav-sidebar">
      <router-link  tag="li" to="/product"><a href="#">產品管理</a></router-link>
    </ul>

2.1 加入默認樣式

默認選中的樣式是在li標簽上加上class="active"

 #將其渲染成以下樣式，這是默認選中的樣式  
  <ul class="nav nav-sidebar">
      <li class="active"><a href="#">產品管理</a></li>
    </ul>

2.1.1 tag

如果想要 <router-link> 渲染成某種標簽，例如 <li>。 可以使用 tag prop 類指定何種標簽，同樣它還是會監聽點擊，觸發導航。

    <ul class="nav nav-sidebar">
      <router-link  tag="li" to="/product"><a href="#">產品管理</a></router-link>
    </ul>

2.1.2 active-class

設置 鏈接激活時使用的 CSS 類名。默認值可以通過路由的構造選項 linkActiveClass 來全局配置。比如：li標簽上渲染出class="active"

• 可在 <router-link> 上使用 active-class 屬性，指定渲染后生成其他類名

 <router-link  tag="li" to="/product" active-class=“active”><a href="#">產品管理</a></router-link>

但是這樣需要沒一個router-link上都需要加，可以使用全局配置，避免麻煩

• 可以通過路由的構造選項 linkActiveClass 來全局配置

//在router文件夾下的index.js中配置


export default new Router({
  // 全局配置 router-link 標簽生成的 CSS 類名
  linkActiveClass: 'active',
  routes: [
  ]
})

2.1.3 exact

　　如果完成上述配置后，會發現不管點擊哪一個鏈接根路由（/）一直有高亮背景， 因為 /product都會去模糊匹配 / 和 /product， 所以 / 一直有高亮 ，可在router-link 標簽上使用 exact 屬性，針對根路由（/）開啟精確匹配。

 <router-link  tag="li" to="/" exact><a href="#">首頁</a></router-link>

此時就完成了點擊哪個，哪個就會激活有背景色。

3、router-view渲染

這里注意每一層的路由最后渲染都應該渲染在它上一層錄有對應的組件中，例如：

    {
      path: '/product',
      name: 'product',
      component: Vproductcontent,
      children:[
        {
          path: '/product/hotproduct',
          name: 'hotproduct',
          component: Vhotproduct,   
　　　　　　　　 }
　　　　　]
　　 }

children下的組件都應該渲染在Vproductcontent組件中，所以在Vproductcontent下寫router-view的渲染出口。

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="header clearfix headeradd">
      <nav>
        <ul class="nav nav-pills">
          <router-link :to="{name:'hotproduct'}" tag="li">  //路由跳轉連接
            <a>熱銷產品</a>
          </router-link>
        </ul>
      </nav>
      <hr>
    </div>

    <router-view></router-view> //渲染出口

  </div>

4、路由配置默認選中

此時只需要在路由中加入，點擊產品管理，默認跳轉到熱銷產品即可。

    {
      path: '/product',
      name: 'product',
      component: Vproductcontent,//父組件渲染的是子組件的內容<routerview/>寫在父組件中
      children:[
        {
          path: '/product/hotproduct',
          name: 'hotproduct',
          component: Vhotproduct,
          children:[
            {
              path: '/product/hotproduct/detail/:id(\\d+)',
              component: Vhotproductdetail,
            }
          ]
        },


       //點擊產品管理默認選中
        {
          path: '/product',
          redirect: '/product/hotproduct',
        }

5、keep-alive

<keep-alive>  可緩存渲染的路由組件實例，比如一個form表單的組件，輸入完成后切換到其它組件，回來后內容仍然存在

    <!-- <keep-alive緩存form表單的輸入數據 -->
    <keep-alive>
    <router-view></router-view>
    </keep-alive>

6、路由傳參

6.1 定義路由

6.1.1 接收參數（變量占位符）

用於接收路由參數的，可用於接收不同類型

    //路由將匹配id是整型的，params后面可以跟正則
    { path: '/params-with-regex/:id(\\d+)' },

    // * 可以匹配任何東西
    { path: '/asterisk/*' },

    // params用冒號“：”表示
    {path ： ' / params /：foo /：bar ' }，

    //通過添加“？”可以使param成為可選項
    {path ： ' / optional-params /：foo？' }，

詳情參考：https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js

6.2 傳參

       <ul>
          <li v-for="(product, index) in hotProductArray" :key="product.id">
            <router-link :to="'/product/hotproduct/detail/' + product.id">
              {{product.name}}
            </router-link>
          </li>
        </ul>

 <ul>
      <li v-for="(product, index) in hotProductArray" :key="product.id">
         <button @click="pushId(id)">  //相當於點擊路由鏈接(后退1步,會返回當前路由界面)
              {{product.name}}
      </button>
          </li>
        </ul>    


//
        methods:{
          pushId(id){
            this.$router.push(`/product/hotproduct/detail/${id}`)
          }
        },

其余編程式路由API：

this.$router.push(path)      //相當於點擊路由鏈接(后退1步,會返回當前路由界面)
this.$router.replace(path)  // 用新路由替換當前路由(后退1步,不可返回到當前路由界面)
this.$router.back()     //后退回上一個記錄路由
this.$router.go(n)     // 參數 n 指定步數
this.$router.go(-1)    // 后退回上一個記錄路由
this.$router.go(1)      //向前進下一個記錄路由

6.3 獲取對應id的對象

 methods:{
          getProductById(){
            this.id=this.$route.params.id-0 //注意：獲取路徑上的id,減0是為了變成整型，路徑上的id是字符

            //獲取指定的對象,防止頁面刷新數據丟失，存在localStorage，先去這里取值，因為頁面刷新，重新生成Vue實例，內存的數據丟失
            let detailProduct=  window.localStorage.getItem('detailProduct');
              if(!detailProduct) {
                this.detailProduct = this.$store.getters['pm/getHotProductById'](this.id) //獲取指定id的對象
              } else {
                window.localStorage.setItem('detailProduct', this.detailProduct)
              }

          }
      },

在創建這個組件時就應該獲取id，否則頁面剛開始會沒有數據

      created(){
          //只會調用一次,創建時就會調用方法，獲取id
          this.getProductById();

      },

點擊不同的對象就應該監聽路由變化，隨時獲取不同的id

      watch:{
          //監視路由變化，只要變化就會調用方法，重新獲取id
          '$route':function () {
            this.getProductById()
          }
      }

id和對象初始化

data:function(){
         return {
           id:null,
           detailProduct:{}
         }
        },

渲染數據

  <div class="jumbotron">
    <h1>{{ id }}</h1>
    <h1>{{ detailProduct }}</h1>

  </div>

6.4 路由傳參關系圖

參考文檔：https://router.vuejs.org/zh/