Vue-router2.0学習ノート

Vue.jsの大きな特色は、単一ページアプリケーションの構築が非常に便利であることであり、単一ページアプリケーションの構築を容易にするためにはルーティングが欠かせない以上、vue-routerはvueが公式に提供するルーティングフレームワークである.全体的に、vue-routerは簡単に設計されています.次に、私が実際に使った方法について話します.文章には公式ドキュメントを見ることができます.vue-routerのインストールはここでは言わないで、このブログを見に来ると信じています.これらの基本的な能力はすべてあります.
先例

//              
//    ：        
const goods = { template: '
goods
' };
const ratings = { template: '
ratings
' };
const seller = { template: '
seller
' };
//    ：import      
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';
//       (routes)，components    Vue.extend()   
const routes = [
  { path: '/goods', component: goods },
  { path: '/ratings', component: ratings },
  { path: '/seller', component: seller }
];
//         
const router = new VueRouter({
  // ES6    ，   routes:routes
  routes  
});
//     vue     
const app = new Vue({
  el: '#app',
  router
});
//   
const app = new Vue({
  router
}).$mount('#app')

ここまでvue-routerで に ページアプリケーションを できます. は にモジュール プログラミングの を っています.vue ファイルは、モジュール プログラミングでvue-routerをどのようにロードするか からないので、 のプロジェクトのソースコードを にすることができます.
router-linkとrouter-view
の を ると、きっとrouter-linkとrouter-viewに があるに いない.
router-link
の の から、router-linkはコンポーネントであり、デフォルトではリンク きaラベルとしてレンダリングされ、to でリンクアドレスを します. : したrouter-linkは、classプロパティ .router-link-activeを に します.
router-linkプロパティ
to
これは する があるプロパティです.そうしないと、ルーティングは になりません.ルーティングのリンクを し、 であってもターゲットの を するオブジェクトであってもよい.

replace
ブールタイプで、デフォルトはfalseです.replaceがtrueに されている 、ナビゲーションはhistoryレコードを さず、ブラウザのロールバックボタンをクリックしてもこのルーティングに ることはありません.

tag
router-linkはデフォルトでaラベルとしてレンダリングされますが、 のラベルとしてレンダリングする もあります.tag はrouter-linkがどのラベルとしてレンダリングされるかを するために されます.

active-class
したrouter-linkは、このclass を するためにclass .router-link-activeを に します.
router-view
このコンポーネントは、 するルーティングをレンダリングするために される に です.router-viewコンポーネントにtransition を できます. な い はVue 2を してください.0 Transitionの な い は です.と み わせて することもでき、keep-aliveはデータをキャッシュすることができ、ルーティングコンポーネントを レンダリングすることなく、 のルーティングコンポーネントのデータが される. えば、 のルーティングコンポーネントaに していくつかのDOM を った 、 のルーティングコンポーネントbにアクセスし、ルーティングコンポーネントaに る のDOM は、keep-aliveを えずにルーティングコンポーネントaに ると、 のDOM がなくなり、 たに われる.アプリケーションにカートコンポーネントがある はkeep-aliveを する があります.

いくつかの さな はどのように しますか?
なるルートの なるページヘッダー
マルチページアプリケーションでは、 ページに なるタイトルを できますが、 ページアプリケーションのルーティングであれば? は することもできて、 する は1つだけではありませんて、 は に のルートとナビゲーションのフックの を する を っていました. のようになります.

//            ，name     
const routes = [
  { path: '/goods', component: goods, name: 'goods' },
  { path: '/ratings', component: ratings, name: 'ratings' },
  { path: '/seller', component: seller, name: 'seller' }
];
//       
const router = new VueRouter({
  routes: routes
})
//      ，  afterEach    
router.afterEach((to, from, next) => {
  document.title = to.name;
})

きルーティング
ネーミングルートが われている 、ここでお ししましょう. きルーティングとは、1つの でルーティングを し、ルーティングを するときにnameプロパティを することです.router-linkでは、ルーティングの でルーティングにリンクすることもできます.

seller

ナビゲーションフック
これはまだあまり ったことがありませんが、 にナビゲーションをブロックするために われているので、 ドキュメントを にしてみましょう.
アプリケーションに るとルーティングコンポーネントをレンダリングする
アプリケーションに ったばかりの は「/」というルートに りますが、 「/goods」に りたい はどうすればいいのか、ここでは2つの を します.1つはリダイレクトを し,もう1つはvue-routerを したナビゲーションプログラミングである.
リダイレクト

const routes = [
  { path: '/', redirect: '/goods'}
]

ではないでしょうか.リダイレクトのターゲットは、 きルーティングであってもよい.

const routes = [
  { path: '/', redirect: { name: 'goods' }}
]

ナビゲーションプログラミング
vue-routerのナビゲーション プログラミングを したrouter.pushメソッドは、 の を することもできる.

//    vue        
router.push('/goods')

router.pushメソッドは、 なるリンクに にナビゲートするために されます.historyスタックに しいレコードを し、をクリックするとrouterを び すのと じです.push(...).
vue-routerにはrouterもあります. go 、 と い は になるhttps://router.vuejs.org/zh-cn/essentials/navigation.html.