ルーティングVUE新規プロジェクトの標準構成

ルートに設定されたすべての場所は、4つのステップまたは4つの合計を使用しました

1.index.js（SRC - ルータ - index.js）

'VUE'からインポートヴュー
からインポートルータ「VUE-ルータの
 // '@ /コンポーネント/ HelloWorldの'からの輸入のHelloWorld


以下からのインポートホーム '@ /コンポーネント/レイアウト/ホーム' 
からの輸入showuser '@ /コンポーネント/ t_dom_owner_user / showuser' 
輸入addusersfromotherから '@ /コンポーネント/ t_dom_owner_user / addusersfromother'

以下からの輸入showresT '@ /コンポーネント/ t_dom_owner_resT / showresT'
Vue.use（ルーター）
エクスポートデフォルト 新しいルータ（{
     // ルート：
    //      { 
    //          パス： '/'、
    //          名前： 'ログイン'、
    //          コンポーネント：ログイン
    //      } 
    // ]
    
        ルート：[
            
        { 
            パス： '/' 、
            名前：「ホーム」、
            コンポーネント：ホーム、
            子供たち：[
                {
                  パス： '/ showuser' 、
                  名前： 'showuser' 、
                  コンポーネント：showuser、
                }、
                { 
                    パス： '/ showresT' 、
                    名前： 'showresT' 、
                    コンポーネント：showresT 
                }]
           
        }、  
        
        { 
            パス： '/ addusersfromother' 、
            名前： 'addusersfromother' 、
            コンポーネント：addusersfromother 
        }、 
       
    ]




}）

2.main.js（SRCのルートディレクトリ）

輸入Vueの「VUE」から
インポートアプリから「./App.vue」
からの輸入ElementUI  『要素-UI』;
インポートルータ './router' 
インポート '要素-UI / libに/テーマチョーク/ index.css' ;
インポート「../public/css/main.css' 
インポート・ストアから」../store」
Vue.config.productionTip = 偽;
Vue.use（部品）



新しいビュー（{
  ルータ、
  レンダリング：H => H（APP）、
  格納、

}）。$（マウント） '#app'を

 

3.App.vue

<テンプレート>
  <DIV ID = "アプリ">
    <！ -  <IMG ALT = "Vueのロゴ" SRC = "./資産/ logo.png">  - >
    <！ -  <HelloWorldのMSG = "あなたのVue.jsアプリケーションへようこそ" />  - >
    <！ -  <ホーム> </ホーム>  - >
    <ルータビュー> </ルータビュー>
  </ div>
</テンプレート>

<スクリプト>
// 「./components/HelloWorld.vue」からの輸入のHelloWorld 
// 「./components/layout/Home」からインポートホーム。
輸出のデフォルト{
  名前：「アプリ」、
  成分：{
    // HelloWorldの
    // ホーム
  }、

}。
</ SCRIPT>

<スタイル>
#app {
  幅： 100％;
  高さ： 100％;
}
</スタイル>

<ルータビュー> </ルータビュー>に注意App.vueそのプロジェクトがルーティングインタフェースの実行を開始意味し、構成する必要があり、

つまり、HTTP index.jsルートパスに対応する構成で：// localhostを：/＃8080、ポータルページapp.vueとして

パス： '/' 、
名前：「ホーム」、
コンポーネント：ホーム、

4.他のアプリケーション・ルーティング・インターフェース

例えばshowowner.vue

< テンプレート> 
  < divの> 
    <！ - <EL-ツリー：データ= "データ" @ノードクリック= "handleNodeClick"> </ EL-木> - > 
    < EL-コンテナ> 
      < EL-脇幅=」 200pxの」> 
        < EL-ツリー
           ：データ= "データ" 
          ノード・キー= "ID" 
          ：小道具= "defaultProps" 
          ：拡大・オン・クリック・ノード= "false"を
          ：ハイライト電流= "true"の
          ノードクリック@ = "handleNodeClick" 
        > 
          <スパンクラス=「カスタム・ツリー・ノード」スロットスコープ= "{ノード、データ}" > 
            < スパン> {{data.data.ownerName}} </ スパン> 
            < スパン> 
              < EL-ボタンタイプ= "テキスト" サイズ= "ミニ" > 
                < I クラス= "IL-アイコン編集」> </ I > 
              </ EL-ボタン> 
              < EL-ボタンタイプ= "テキスト" サイズ= "ミニ" > 
                < I クラス= "エル・アイコン・プラス" > </ I > 
              </ EL-ボタン> 
              < EL-ボタンタイプ= "テキスト" サイズ= "ミニ" > 
                < I クラス= "エル・アイコン・削除" > </ I > 
              </ EL-ボタン> 
            </ スパン> 
          </ スパン> 
        </ エル・ツリー> 
      </ EL -aside >

      < EL-メイン> 
        < EL-COL ：スパン= "24" クラス= "コンテンツラッパー" > 
          < 遷移名= "フェード" モード、 "アウトで" = > 
            < ルータビュー> </ ルータビュー> 
          < / 遷移> 
        </ EL-COL > 
      </ EL-メイン> 
    </ EL-コンテナ> 
  </ DIV > 
</ テンプレート>

レイアウトEL-主要構成<ルータビュー> </ルータビュー>に埋め込まれ、この手段ルーティングインタフェースshowowner.vueのBEがel-主にジャンプする、すなわち、トリガ位置をジャンプすることを特徴と

 　　　< EL-メイン> 
        < EL-COL ：スパン= "24" クラス= "コンテンツラッパー" > 
          < 遷移名= "フェード" モード、 "アウトで" = > 
            < ルータビュー> </ ルータビュー> 
          < / 遷移> 
        </ EL-COL > 
      </ EL-メイン>

ルーティングジャンプ書き込まれ、その後、界面へのジャンプがpathVariableある、pathVariableインターフェースは、上記のEL-主要な構成で表示しました

handleNodeClick（データ）{
      console.log（データ）。
      // CPCノードはOWNERIDを初期化する必要があり
      、この .domId = ; data.data.domId
       この .ownerId = data.data.ownerId;
       この.varifyを（）;
       この$ Router.push（{。
        パス：この.pathVariable、
        クエリ：{
          domId：この.domId、
          OWNERID：この.ownerId
        }
      }）;
       
    }