Vueのナビゲーションルートのプログラミングモードとハッシュ

インポート「VUE」からのVue; 
「./App.vue 『からインポートするアプリケーション; 


//は、公共SCSS注意を導入する：プロジェクトを作成すると、SCSSしなければならないときに

インポート』 ./assets/css/basic.scss';    




//リクエストデータ


; VueResourceインポート'VUE-リソース'から
Vue.use（VueResource）; 




インポートVueRouter 'VUE-ルータ'から、

Vue.use（VueRouter）; 

... // 1アセンブリ作成


からインポートホーム'を./components/Home.vue' ; 

;ニュース'./components/News.vue 'からインポート

コンテンツからインポート' ./components/Content.vue'; 



//ルーティング注2を設定：名前

CONSTルート= [ 
  '/ホーム'、コンポーネント：{パス。 }ホーム、
  {パス： '/ニュース'、コンポーネント：ニュース、名前： 'ニュース'}、

  {パス： '/コンテンツ/：AID'、コンポーネント：コンテンツ}、/ *動的ルーティング* /

  {パス： '*'、リダイレクト ： '/ホーム'} / * デフォルトルート* /スキップ
] 


// NOTE 3インスタンス化VueRouterを：名前

のconst =新しい新しいルータVueRouter（{ 
  MODE： '歴史'、/ *ハッシュモード*履歴/への
  経路：経路//（略称）は、ルートに対応
}）




// 4、ルーティングマウント。

新しい新しいヴュー（{ 
  EL '#app'を、
  ルータ、
  レンダリング：H => H（APP）
}）


/ /。5 < ルータ-ビュー> </ ルータービュー> App.vueに

< テンプレート> 
    <！ - rootになるすべてのコンテンツがアップ含まれてい- > 
    < divの上記のid =「ホーム」>     
       私は自宅のコンポーネント午前


        < ボタン@click =「goNews（）」>ニュースページへJSジャンプすることによって< / ボタン> 
       
    </ DIV > 
</ テンプレート> 


< スクリプト> 
    エクスポートデフォルト{ 
        データ（）{ 
            リターン{                
               MSG：' 私は家アセンブリよ' 
             
            } 
        }、
        メソッド：{

            goNews（）{ 


                // 注：公式の文書が間違っ


                // 最初のジャンプ方法

                // この$のrouter.push（{パス： 'ニュース'}）。


                // この$（{パスをrouter.push。： '/コンテンツ/ 495'}）; 







                // 他のジャンプ方法

                    //    {パス： '/ニュース'、コンポーネント：ニュース、名前： 'ニュース'} 


                    // router.push（{名： 'ニュース' 、のparams：{userIdを：123}}） 


                    この。$のrouter.push（{名：' ニュース' }）


                

            } 
        } 
    } 

</ スクリプト> 

< スタイルLANG = "SCSSは、" スコープ> 
    
</ スタイル>