Vueルータ

私は昨日、私のVueコースのルータセクションを終えて、終わりました.Vue CLIの初期設定中にプロジェクトをオプションとして追加することもできますvue add router . The documentation 非常に良いそれはよくレイアウトされ、いくつかの良い例と特定の側面とどのようにルータを使用するためのユースケースがあります.
また、私は404ページを作成したり、私のルートのトランジションを試していくつかのことのために行くVue学校のコースもあります.ルータをインストールした後main.js 使用import Router from 'vue-router' 次にVue.use(Router) を初期化し、ルートを追加します.

const router = new Router({ routes})

この例ではroutes.js オブジェクトの配列で、次にインポートされるファイルmain.js import { routes } from './routes 以下に例を示します:

export const routes = [
  { path: '/', name: 'Home'},
  { path: '/page2', name: 'Page 2'}
]

次に<router-view></router-view> into App.vue これをvueインスタンスで表示するにマッチします.デフォルトのモードはハッシュを使用します.localhost:3000/#/ このハッシュモードはスパではなく# サーバにリクエストを送信します.これを変更するにはmode: history 別のルータファイルまたはアプリケーションのいずれかの新しいルータ.Vue

import Router from "vue-router";
Vue.use(Router);

export default new Router({ mode: "history",});

ルータリンクを用いたナビゲーション
使用<router-link></router-link> 暗黙のEventListenerを持つ利点は、それがクリックを聞くでしょう、そして、サーバー要求を送るページを再読み込みするデフォルトのふるまいの代わりに正しいルートをロードするでしょう.また、コードを介してだけでなく、ナビゲーションをトリガすることができますrouter-link 例えば

...methods: { goHome(){ this.$router.push('/') }}...

このメソッドは、それから要素例えばg .ボタンに加えられることができます.

ルートパラメータ
Paramsプロパティを使用してコロンを使用してIDのようなURLの動的部分を追加するには、ルートでキー値ペアを保持するオブジェクトです.js... path: '/user/:id... 次に、コンポーネントを作成します

...data(){...id: this.$route.params.id}

チャイルドルート
子ルートを追加するには、childrenプロパティを追加します.

{ path: '/person', component: Person, 
children: [{ path: '', component: myComp }...]

名称
ルートを作成するときに、名前のプロパティを任意のルートに追加できます.

{ path: ':id/edit', name: 'editUser' }

これは、あなたのナビゲーションに追加することができますどこにでも必要です.:to="{ name: 'editUser', params: { id: $route.params.id }}" これらをコードに追加することもできます.this.$router.push({ name: 'home' })
クエリパラメータ
これらは、あなたのナビゲーションに直接追加/追加またはオブジェクトの構文を使用します...to="/?a=1000&locale=en" or :to=...query: { locale: 'en' } これらを抽出するには、paramsと同じようにこれを行うことができます.Locale: {{ $route.query.locale }} また、それらを命名して、複数のルータのビューを持つことができます.
次に、ルートを更新します.

...path: '', name: 'home', components: {
default: Home,
'header': Header
}

キャッチオールルート
これはワイルドカードを使用して設定されています.

{ path: *, redirect: '/' }

これはあなたの中に含まれていない何かをキャッチしますroutes.js ファイルをあなたのユーザーをホームページにリダイレクトします.

ガード
名前が示すように、これらはルートを保護するのに用いられます.第一にbeforeEnter ガードこれはすべての時間を実行するようにグローバルなチェックのためにグローバルに設定することができます.

router.beforeEach((to, from, next) => {
next() // this needs to be included
})

これは、内部の個々のルートで設定することができますroutes.js セットアップ

...path: '', component: '', beforeEnter: (to, from, next) => {
next()
}...

LifeCycleフックのようなコンポーネントでも設定できます.

beforeRouteEnter(to, from, next) {
  if(true){
    next()
  } else {
    next(false)
  }
}

このガードは、コンポーネントを確認するルートが表示される前に呼び出されます.
BeforeLeaveガードは、コンポーネントレベルで追加する必要があります.

怠惰な読み込み
それぞれのコンポーネントに対してルートでAsync関数を設定できます.これによりパフォーマンスが向上します.

... const User = resolve => {
   require.ensure(['./components/...'], () => {
     resolve(require('./components/...'))
  })
}

私はまだこれについて学んでいます、そして、これは私が学ぶように私が文書にしようとすることです.