ネストされたVUE VUE-ルータのルーティング

図1に示すように、定義されたルーティング

  ルート：[
 
    { 
      パス：「/製品」、//第一層ルーティング 
      名：「商品」、
      コンポーネント：Vproductcontent、 //親要素のコンテンツがレンダリングされるサブアセンブリ<routerview /> 親コンポーネント内に書き込む
      子供：[ 
        { 
          パス：' /製品/ hotproduct ' 、//第二層ルーティング 
          名：' hotproduct ' 、
          コンポーネント：Vhotproduct、
          子供：[ 
            { 
              パス：' /製品/ hotproduct /ディテール/：ID（\\ + D）' 、//第3層ルーティング 
              コンポーネント：Vhotproductdetail、
            } 
          ] 
        } 

      ] 
    } 


  ]

2、使用 router-link 组件来导航

左側のメニューバーにVleftルータ・リンクアセンブリを使用します

    <UL クラス = " NAV NAV-サイドバー" > 
      <ルータリンクタグ= " 李"に= " /製品" > <a href= "＃">产品管理する</a> </ルータ・リンク> 
    </ UL >

2.1追加デフォルトのスタイル

デフォルトのスタイルで選択したラベルの李上=「アクティブ」クラスを追加することです

 ＃デフォルトのスタイルで選択されている次のスタイル、レンダリング   
  <UL クラス = " NAV NAV-サイドバー" > 
      <LIのクラス = " アクティブ" > <a href= "#">製品管理する</a>ます。</ liを> 
    </ UL>

2.1.1タグ

あなたがしたい場合は <router-link> 、たとえば、ラベルのいくつかの並べ替えにレンダリングします <li>。あなたが使用できる tag ラベルが指定されているもの小道具クラスを、それはまだ同じクリック、トリガーナビゲーションに耳を傾けます。

    <UL クラス = " NAV NAV-サイドバー" > 
      <ルータリンクタグ= " 李"に= " /製品" > <a href= "＃">产品管理する</a> </ルータ・リンク> 
    </ UL >

2.1.2アクティブクラス

リンクがアクティブになるときに使用するCSSクラス名。デフォルト値は、オプションのルーティングすることによって構築することができ linkActiveClass 、グローバルに設定を。例えば：ラベルリーにクラス=「アクティブ」レンダリング

クラス名を生成するために、アクティブ-class属性<ルータリンク>で使用することができる他のレンダリングを指定

<ルータリンクタグ= " リー" =の" /製品"アクティブ- クラス =「アクティブ」>の<a href= "＃">产品管理する</a> </ルーターリンク>

しかし、これはあなたがトラブルを避けるために、グローバルコンフィギュレーションを使用することができ、ニーズの増加にルータリンクを必要としませんでした

グローバルコンフィギュレーションオプションをルーティングすることによって構築することができるlinkActiveClass

// 配置されたindex.jsルータフォルダに


エクスポートデフォルトの 新しい新しいルータ（{
   // グローバルルータリンクラベル生成CSSクラス名 
  linkActiveClass：「アクティブ」、
  ルート：[ 
  ] 
}）を

2.1.3正確な

　　もし、上記の構成を完了した後、リンクルーティングルート（/）をクリック、背景を強調されているものに関係なく、理由/製品は、ファジー・マッチング/と/製品を移動しますので、/ルータ、リンクタグに、利用可能強調されていることがわかります正確な性質、完全一致（/）のためのオープンルート経路を使用。

 <a href="#">首页</a>の</ルータ・リンク> <= "/" 正確にルータのリンクタグ= "李">

これは、この時点で背景色をアクティブにします[完了]をクリックします、です。

3、ルータビューのレンダリング

各層の最後の経路は、例えば、対応する構成要素を記録し、描画層に描画されるべきであることに注意してください。

    { 
      パス： '/製品' 、
      名称： '製品' 、
      成分：Vproductcontent、
      子供：[ 
        { 
          パス： '/製品/ hotproduct' 、
          名称： 'hotproduct' 、
          成分：Vhotproduct、    
　　　　　　　　 } 
　　　　　] 
　　 }

子供のコンポーネントでレンダリングされるべき Vproductcontentコンポーネント、そうVproductcontentの輸出ルータ・ビューをレンダリング書きます。

< DIV クラス= "COL-SM-9 COL-SM-オフセット-3 COL-MD-10 COL-MD-オフセット2メイン" > 
    < DIV クラス= "ヘッダclearfixのheaderadd" > 
      < NAV > 
        < UL クラス=」 NAV NAV-ピル」> 
          < ルータリンク：へ= "{名： 'hotproduct'}" タグ= "リー" > //路由跳转连接
             < A >热销产品</ A > 
          </ ルーターリンクを> 
        </ UL > 
      </ NAV > 
      <時間> 
    </ divの> 

    < ルータ-ビュー> </ ルータ-Viewは> //エクスポートをレンダリング

   </ DIV >

デフォルトで選択された4、ルーティング構成

この時点で、唯一の製品管理をクリックして、ルートに追加する必要があり、製品の販売は、デフォルトにジャンプすることができます。

    { 
      パス： '/製品' 、
      名称： '商品' 、
      コンポーネント：Vproductcontent、// で記述された親要素のコンテンツがレンダリングされるサブアセンブリ<routerview />親コンポーネント
      子供：[ 
        { 
          パス： '/製品/ hotproduct' 、
          名称： 'hotproduct' 、
          コンポーネント：Vhotproduct、
          子供：[ 
            { 
              パス： '/製品/ hotproduct /ディテール/：ID（\\ + D）' 、
              コンポーネント：Vhotproductdetailは、
            } 
          ] 
        } 


       // デフォルトで選択された製品の管理をクリック
        { 
          パス：'/製品' 、
          リダイレクト： '/製品/ hotproduct' 、
        }

5、キープアライブ

<キープアライブ>キャッシュコンポーネントインスタンスをルーティングする他の入力コンポーネントに切り替えた後、コンテンツがバックした後に依然として存在している、そのようなアセンブリの単一形態として、レンダリングすることができます

    <！ - <入力データ・バッファキープアライブフォームform - > 
    < キープアライブ> 
    < ルータ-ビュー> </ ルータービュー> 
    </ キープアライブ>

図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/

ネストされたVUE VUE-ルータのルーティング

おすすめ