目次
1. プログラムによるナビゲーション
ページ ジャンプにはプログラム ナビゲーションが使用されます。
<router-link>create a タグを使用してナビゲーション リンクを定義し、ルーティング ジャンプを実現する方法は、宣言型ナビゲーションと呼ばれます。
プログラムによるナビゲーションは、ルーターのインスタンス メソッドを使用してコードを記述することで実装されます。
⭕️ページジャンプの実現方法
1、$router.push
$router.push() を使用して指定したルートにジャンプすると、履歴スタックに新しいレコードが追加されます. ユーザーがブラウザの戻るボタンをクリックすると、ジャンプ前の URL に戻ることができます.
this.$router.push({
path:'/aDetails',
query:{id}
})2、$router.replace
$router.replace を使用してもブラウザに履歴は追加されません
this.$router.replace({
path:"/aDetails",
query:{id}
})3、$router.go
$router.go は、前方または後方の指定されたページにジャンプするために使用されます
//前进一步记录
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 不传递参数或者参数为 0，表示刷新当前页面
router.go()
// 如果 history 记录不够用，则会报错
router.go(-100)
router.go(100)4. <router-link> タグ (基本的にはタグ) を使用します。
5. a タグを使用する
⭕️パラメータの渡し方
1. path-query パラメータの受け渡し
this.$router.push({
path:'/aDetails',
query:{id}
})パスとクエリを組み合わせてパラメーターを渡すと、ブラウザーのアドレスバーにパラメーターがつなぎ合わされ、ページを更新した後にデータが失われることはありません。
2. name-params パス パラメータ
this.$router.push({
name:"ADetails",
params:{id},
})name と params の組み合わせで渡されたパラメーターを使用する場合、パラメーターは $route で運ばれ、渡されたパラメーターは 1 回限りであり、ページが更新されるとデータが失われます。
例
小さなケースを書く:
記事のタイトルをクリックして、記事の詳細ページにジャンプします (vue-cli で作成)
コンポーネントの下に、Article.vue と ArticleDetails.vue の 2 つのコンポーネントを作成します。
ルーターの下の index.js でルーティングを構成します。
app.vue
アイテム ビュー
記事の詳細.vue
this.$route によって出力された結果:
操作の結果は次のとおりです。 
query を使用してパラメーターを渡すと、パラメーターがアドレス バーに表示されることがわかります。
2.ネストされたルーティング
実際のアプリケーション インターフェイスは、通常、多層のネストされたコンポーネントで構成されています。同様に、URL の動的パスの各セグメントも、特定の構造内のネストされたコンポーネントの各レイヤーに対応します。
例：
コンポーネントの下に、AboutOne.vue、AboutTwo.vue、AboutThree.vue の 3 つのコンポーネントを作成します。
One.vueについて
<template>
<div>
about-one
</div>
</template>AboutTwo.vue
<template>
<div>
about-two
</div>
</template>AboutThree.vue
<template>
<div>
about-three
</div>
</template>ルーターの下の index.js でルーティングを構成します。
ビューの下の AboutView.vue
<template>
<div class="about">
<div><router-link to='aboutone'>about1</router-link></div>
<div><router-link to='abouttwo'>about2</router-link></div>
<div><router-link to='aboutthree'>about3</router-link></div>
<div>
<router-view></router-view>
</div>
</div>
</template> 
3.動的ルートマッチング
多くの場合、特定のパターンに一致するすべてのルートを同じコンポーネントにマップする必要があります。
例: ユーザー コンポーネントがあり、異なる ID を持つすべてのユーザーがこのコンポーネントを使用してレンダリングする必要がある場合、vue-router のルーティング パスで動的パス パラメーターを使用して、この効果を実現できます。動的パス パラメータはコロンで識別されます。
index.js
app.vue
動的パス パラメータを変更すると、ページはジャンプせず、現在のページのままであることがわかります。
4.ナビゲーションガード
ルートが変更されると、ナビゲーション ガードがトリガーされます。ナビゲーション ガードは、グローバル ガード、ルーティング専用ガード、およびコンポーネント ガードに分けられます。
1.グローバルガード
グローバルフロントガード
beforeEach((to,from,next)=>{
next();//手动调用向下执行
next(fale);//阻止路由向下执行
})パラメータの説明:
to: 入ろうとしているターゲット ルートにはオブジェクトがあります
from: 現在のナビゲーションが去ろうとしているルート
next: は関数であり、このフックを実行するために呼び出す必要があります。実行効果は、次のメソッドの call パラメータに依存します. パラメータのデフォルトは、下方向への実行を意味する true と、ルートが下方向に実行されないようにすることを意味する false です。
グローバル後衛
グローバル リア ガードには next メソッドがありません。ルートを下方向に実行させるために next メソッドを呼び出す必要はありません。
afterEach((to,from)=>{
})2.ルーティング専用ガード
ルート専用ガードを発動するには現在のルートに入る必要があります。
beforeEnter((to,from,next)=>{
})3. コンポーネント内のガード
//进入组件路由时触发
beforeRouteEnter(to,from,next){};
//组件路由更新时触发
beforeRouteUpdate(to,from,next){};
//离开组件路由时触发
beforeRouteLeave(to,from,next){};これは beforeRouteEnter でウィンドウを指し、
beforeRouteUpdate および beforeRouteLeave 内のこれは、コンポーネント インスタンスを指します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.5.4/vue-router.min.js"
integrity="sha512-zxWuRslhjyZyRAYInXTNl4vC/vBBwLQuodFnPmvYAEvlv9XCCfi1R3KqBCsT6f9rk56OetG/7KS9dOfINL1KCQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="app">
<!-- 使用路由 to表示要去的路由-->
<router-link to="/article">去文章管理</router-link>
<router-link to="/column">去栏目管理</router-link>
<router-link to="/user/1">用户管理</router-link>
<!-- 路由出口 匹配路由对应的组件 -->
<router-view></router-view>
</div>
<script>
// 组件article
let article = {
template: `
<div>文章页面</div>
`,
};
// 组件user
let user = {
template: `
<div>用户页面---{
{id}}</div>
`,
// 4、组件内守卫
beforeRouteEnter(to, from, next) {
console.log(this, 'beforeRouteEnter');
console.log(to, from);
next()
},
beforeRouteUpdate(to, from, next) {
console.log(this, 'beforeRouteUpdate');
},
beforeRouteLeave(to, from, next) {
console.log(this, 'beforeRouteLeave');
next()
},
data() {
return {
id: 0
}
},
};
// 组件column
let column = {
template: `
<div>栏目页面</div>
`
};
// 配置路由对象数组
let routes = [
{
path: '/article',
component: article
},
{
path: '/column',
component: column,
// 3、路由独享守卫 只有进入当前路由时才会触发
beforeEnter: (to, from, next) => {
console.log(to,from,next);
next();
}
},
{
path: '/user/:id',
component: user
}
];
// 创建路由器对象router
let router = new VueRouter({
routes,
});
// 1、全局前置守卫
router.beforeEach((to,from,next)=>{
console.log(to,from,next);
next()
// next(false);//阻断路由向下执行
});
// 2、全局后置守卫
router.afterEach((to,from)=>{
console.log(to,from);
})
new Vue({
router,
el: "#app",
data: {
}
})
</script>
</body>
</html>5.ルーティングURLアドレスバーの変化を監視する方法
1.作成されたものを聞く
created(){
console.log(this.$route.params.xxx)
}2. ウォッチを使用して監視する
watch:{
$route(to,from){
//to ---即将进入的路由
//from --上一个离开的路由
console.log(to.params)
}
}3.コンポーネントでガードを使用して監視します（コンポーネントが更新されたときにトリガーされるフック）
beforeRouteUpdate(to,from,next){
console.log(to.params)
next()
}アドレスバーの変化を監視することにより、アドレスバーに保持されているパラメーターを取得できます。
6.ルーティングモード
ルーティング モードにはハッシュ モードと履歴モードがあり、デフォルトはハッシュ モードです。
ルーティング モードはルーター オブジェクトで設定されます。
let router = new VueRouter({
routes,
// 路由模式
mode: 'history'
// mode: 'hash'
});ハッシュ モードの動作原理は、ウィンドウ内のハッシュの変更を監視できる hashchange イベントです。このイベントをトリガーするために、URL の後に #xx をランダムに追加します。
window.onhashchange = function (event) {
console.log(event);
}newURL と oldURL がある HashChangeEvent イベント オブジェクトを出力します。
window.history オブジェクトを出力します。履歴オブジェクトには back()、forword()、go() およびその他のメソッドがあります。
2 つの違い:
1. ハッシュはルーティング パスで # を保持し、履歴はルーティング パスで # を保持しない
2、ハッシュ更新ページはサーバーを要求しない、履歴更新ページはサーバーを要求する
3、動作原理hash は hashchange イベントです
4, 履歴の動作原理は、
古いバージョンのブラウザをサポートするために、go、back、forward 5、および hash を使用することです. History は、h5 の新しい API です