Vueルーティングルーターの詳細な説明

npm で vue-router をインストールします

//index.js
'vue-router' から VueRouter をインポートします。
'vue' から Vue をインポートします
「../views/Home」からHomeをインポートします。
Vue.use(VueRouter) //ルーティングプラグインを登録 export default new VueRouter({
    ルート:[{
        パス：'/'、
        コンポーネント:ホーム
    }]
})

//メイン.js
'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。
'@/store' からストアをインポートします
import router from '@/router' //ここで、作成したルーティング オブジェクトを導入します。モジュラープログラミングの考え方 Vue.config.productionTip = false
Vue.prototype.bus = 新しい Vue()
新しいVue({
  店、
  ルーター、
  レンダリング: h => h(App),
}).$mount('#app')

 {
        パス：'/'、
        コンポーネント:ホーム
        名前:ホーム
    }

 <router-link to="/">ホームへ移動</router-link>

 <router-link :to="{path:'/'}">ホームへ移動</router-link>

 <router-link :to="{name:'home'}">ホームへ移動</router-link>

// 文字列 router.push('home')
// オブジェクト router.push({ path: 'home' })
// 名前付きルート router.push({ name: 'user', params: { userId: '123' }})
// クエリパラメータを使用すると、/register?plan=private になります
router.push({ パス: 'register', クエリ: { プラン: 'private' }})

定数ユーザーID = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ パス: `/user/${userId}` }) // -> /user/123
// ここでのパラメータは有効ではありません router.push({ path: '/user', params: { userId }}) // -> /user

 {
        パス:'/user/:id',
        コンポーネント:ユーザー
        名前:ユーザー
    }

 <router-link to="/user/01">ホームへ移動</router-link>

 <router-link :to="{path:'/user/01'}">ホームへ移動</router-link>

 <router-link :to="{name:'/user',params={id:'01'}}">ホームへ移動</router-link>

{
  // すべてのパスに一致します パス: '*'
}
{
  // `/user-` で始まるパスに一致します。パス: '/user-*'
}

<router-link to="/user?name=zhangsan">...</router-link>
<router-link :to="{path:'/user?zhangsan'}">...</router-link>
<router-link :to="{path:'/user',query:{name:'zhangsan'}}">...</router-link>
<router-link :to="{name:'user',query:{name:'zhangsan'}}">...</router-link>

<router-link to="/user?name=zhangsan">...</router-link>
<router-link :to="{path:'/user?zhangsan'}">...</router-link>
<router-link :to="{path:'/user',query:{name:'zhangsan'}}">...</router-link>
<router-link :to="{name:'user',query:{name:'zhangsan'}}">...</router-link>

定数ユーザー = {
  テンプレート： '...'、
  時計：
    $route(宛先、送信元) {
      // ルートの変更に応答します...
    }
  }
}

定数ユーザー = {
  テンプレート： '...'、
  ルート更新前(to、from、next) {
    // ルートの変更に反応します...
    // next() を忘れずに呼び出してください
  }
}

{
        パス: '/pageOne',
        コンポーネント:PageOne、
        エイリアス: "/firstPage",
        名前:"ページ1",
        リダイレクト:{name:'pageTwo'}
    },
    {
        パス: '/pageTwo',
        コンポーネント:PageTwo、
        名前:'ページ2'
    }

ルート: [
    {
      パス: '/user/:userId',
      名前: 'ユーザー',
      コンポーネント: ユーザー
    }
  ]

const ルーター = 新しい VueRouter({
  ルート: [
    { パス: '/a'、コンポーネント: A、エイリアス: '/b' }
  ]
})

const ルーター = 新しい VueRouter({
  ルート: [
    { パス: '/a'、リダイレクト: '/b' }
  ]
})

const ルーター = 新しい VueRouter({
  ルート: [
    { パス: '/a'、リダイレクト: { 名前: 'foo' }}
  ]
})

const ルーター = 新しい VueRouter({
  ルート: [
    { パス: '/a'、リダイレクト先: => {
      // メソッドはターゲットルートをパラメータとして受け取り、// リダイレクトされた文字列パス/パスオブジェクトを返します }}
  ]
})

 {
      パス: '/user',
      コンポーネント: ユーザー、
      子供たち： [
        {
          // /user//profile が正常に一致すると、
          // UserProfile はユーザーの <router-view> パスにレンダリングされます: 'profile',
          コンポーネント: UserProfile
        },
        {
          // /user//posts が正常に一致すると、 // UserPosts はユーザーの <router-view> パス: 'posts' にレンダリングされます。
          コンポーネント: UserPosts
        }
      ]
    }

<div id="アプリ">
  <ルータービュー></ルータービュー>
</div>

定数ユーザー = {
  テンプレート: `
    <div class="ユーザー">
      <span>ユーザー コンポーネント</span>
      <ルータービュー></ルータービュー>
    </div>
  `
}

{
        パス:"/namingRoute",
        コンポーネント:{// コンポーネントは「s」で終わることに注意してください。単独で使用された場合、そうではありません。
            デフォルト:ホーム、
            1:ページワン、
            2:ページ2
        }
    }

 	<router-view></router-view>//default に対応するコンポーネントをレンダリングします<router-view name="one"></router-view>//one に対応するコンポーネントをレンダリングします<router-view name="two"></router-view>//two に対応するコンポーネントをレンダリングします

beforeEach((to,from,next)=>{
	//...
})

router.beforeResolve((to, from, next) => {
  // ...
})

router.afterEach((to, from) => {
  // ...
})

使用される場所: 通常はルーターフォルダ内のindex.js
const ルーター = 新しい VueRouter({...})
//グローバルフロントガード router.beforeEach((to, from, next) => {
  // ...
})
//グローバル解決ガード router.beforeResolve((to, from, next) => {
  // ...
})
//グローバルポストフック router.afterEach((to, from) => {
  // ...
})

定数ユーザー = {
  テンプレート: `...`,
  beforeRouteEnter(to, from, next) {
    // このコンポーネントをレンダリングする対応するルートが確認される前に呼び出されます // いいえ!できる！コンポーネントインスタンス `this` を取得します。
    // ガードが実行される前にコンポーネントインスタンスが作成されていないため}
}

beforeRouteEnter (to、from、next) {
  次(vm => {
    // `vm` 経由でコンポーネントインスタンスにアクセスします})
}

定数ユーザー = {
  テンプレート: `...`,
  ルート更新前(to、from、next) {
    // 現在のルートが変更されたがコンポーネントが再利用されたときに呼び出されます // たとえば、動的パラメータを持つパス /foo/:id の場合、/foo/1 と /foo/2 の間を移動すると、
    // 同じ Foo コンポーネントがレンダリングされるため、コンポーネント インスタンスが再利用されます。この場合、このフックが呼び出されます。
    // コンポーネントインスタンス `this` にアクセスできます
  }
}

定数ユーザー = {
  テンプレート: `...`,
  beforeRouteLeave(to, from, next) {
    // このコンポーネントの対応するルートから移動するときに呼び出されます // コンポーネントインスタンス `this` にアクセスできます
  }
}