[Vue.js]vue-router-プログラミングナビゲーション

10409 ワード
vue3 [email protected] vue.js vue router テキストリンク
宣言プロンプトとして<router-link>を使用してナビゲーションを作成するほか、プログラミングによってナビゲーションを作成することもできます.
1.他のURLに移動
(= window.history.pushState)
宣言の仕方
<router-link :to="...">
プログラミングモード
router.push(...)
router.push()には複数のパラメータがあり得る.
// 문자열 경로
router.push('/users/eduardo')

// 객체 경로
router.push({ path: '/users/eduardo' })

// 라우터가 url을 빌드할 수 있도록 명명된 경로
router.push({ name: 'user', params: { username: 'eduardo' } })

// 쿼리 사용 예시, 결과 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 해시 사용 예시, 결과 /about#team
router.push({ path: '/about', hash: '#team' })
合成に関する注意事項
  • pathとparamsは一緒に使用できません.
    • const username = 'eduardo'
// url 수동 작성(인코딩 직접 처리해야 함)
router.push(`/user/${username}`) // -> /user/eduardo
// path와 수동 url 조합
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 가능하면 name과 params를 사용해 자동 url 인코딩을 활용하는 것이 좋다.
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
//path와 params는 함께 사용할 수 없다.
router.push({ path: '/user', params: { username } }) // -> /user
  • パラメータは、文字列、数値、または繰り返し可能なパラメータの配列を指定する必要があります.
  • の他のパラメータ(undefined、falseなど)については、自動的に文字列化されます.
    注意:https://next.router.vuejs.org/guide/essentials/route-matching-syntax.html
    • 2.現在位置の変更
    (= window.history.replace)
    pushとの違いは、履歴スタックに新しいエントリを追加するのではなく、置き換えられることです.
    宣言の仕方
    <router-link :to="..." replace>
    プログラミングモード
    router.replace(...)
    次のように作成できます.
    router.push({ path: '/home', replace: true })
// equivalent to
router.replace({ path: '/home' })
    3.履歴移動
    (= window.history.go)window.history.go(n)と同様に、パスは、履歴スタック内で前後に移動するステップをパラメータとして入力することによって移動することができる.
    // 이전으로
router.go(1)
//뒤로가기
router.go(-1)

// 3 records 만큼 앞으로
router.go(3)

// 입력한 매개변수만큼의 레코드가 없을 경우 실패한다.
router.go(-100)
router.go(100)
    上記3つのナビゲーション方法router.push、router.replace、router.goは、それぞれwindow.history.pushState、window.history.replaceStateおよびwindow.history.goに対応する.history APIの真似だそうです.
    ただし、Vue Routerのナビゲーション方法はhistoryオプションと同じタイプです.
    注-Vue Router公式ドキュメント
    https://next.router.vuejs.org/guide/
    アドバンスホバーアニメーション
    フォームと空間の透明性、半透明性の設定