ルーティング
- 理解: ルートはマッピング関係 (キーと値) のセットであり、複数のルートをルーターで管理する必要があります。
- フロントエンド ルーティング: キーはパス、値はコンポーネントです。
1. 基本的な使い方
-
vue-router をインストールするには、次のコマンドを実行します。
npm i vue-router -
プラグインを適用します:
Vue.use(VueRouter) -
ルーター構成項目を書き込みます。
//引入VueRouter import VueRouter from 'vue-router' //引入Luyou 组件 import About from '../components/About' import Home from '../components/Home' //创建router实例对象，去管理一组一组的路由规则 const router = new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ] }) //暴露router export default router -
切り替えを実装します (アクティブクラスは強調表示スタイルを設定できます)
<router-link active-class="active" to="/about">About</router-link> -
ターゲット プレースメント
<router-view></router-view>
2. いくつかの注意点
- 通常、ルーティング コンポーネントは
pagesフォルダーに保存され、一般コンポーネントは通常componentsフォルダーに保存されます。 - 切り替えることにより、「非表示」ルーティング コンポーネントはデフォルトで破棄され、必要に応じてマウントされます。
- 各コンポーネントには独自の
$routeプロパティがあり、独自のルーティング情報が保存されます。 - アプリケーション全体にはルーターが 1 つだけあり、これは
$routerコンポーネントのプロパティを通じて取得できます。
3. 多段配線（多段配線）
-
ルーティング ルールを設定するには、子設定項目を使用します。
routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { path:'news', //此处一定不要写：/news component:News }, { path:'message',//此处一定不要写：/message component:Message } ] } ] -
Jump (フルパスを書き込むため):
<router-link to="/home/news">News</router-link>
4. ルートのクエリパラメータ
-
パラメータを渡す
<!-- 跳转并携带query参数，to的字符串写法 --> <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link> <!-- 跳转并携带query参数，to的对象写法 --> <router-link :to="{ path:'/home/message/detail', query:{ id:666, title:'你好' } }" >跳转</router-link> -
パラメータを受信します。
$route.query.id $route.query.title
5. ルートの命名
-
機能: 配線ジャンプを簡素化できます。
-
使い方
-
ルートに名前を付けます。
{ path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'welcome', component:Hello, } ] } ] } -
簡略化されたジャンプ:
<!--简化前，需要写完整的路径 --> <router-link to="/demo/test/welcome">跳转</router-link> <!--简化后，直接通过名字跳转 --> <router-link :to="{name:'hello'}">跳转</router-link> <!--简化写法配合传递参数 --> <router-link :to="{ name:'hello', query:{ id:666, title:'你好' } }" >跳转</router-link>
-
6. ルートのparamsパラメータ
-
ルーティングを設定し、params パラメーターを受け取るように宣言します
{ path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用占位符声明接收params参数 component:Detail } ] } ] } -
パラメータを渡す
<!-- 跳转并携带params参数，to的字符串写法 --> <router-link :to="/home/message/detail/666/你好">跳转</router-link> <!-- 跳转并携带params参数，to的对象写法 --> <router-link :to="{ name:'xiangqing', params:{ id:666, title:'你好' } }" >跳转</router-link>特別な注意: ルートが params パラメータを運ぶ場合、to のオブジェクト書き込みメソッドを使用する場合、パス設定項目は使用できません。名前設定を使用する必要があります。
-
パラメータを受信します。
$route.params.id $route.params.title
7. ルーティング小道具の設定
役割: ルーティングコンポーネントがパラメータを受信しやすくする
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
// props:{a:900}
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
// props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
}
8. <router-link>replace 属性
- 役割: ルーティング ジャンプ時のブラウザ履歴の動作モードを制御します。
- ブラウザの履歴を書き込むには 2 つの方法があります。それぞれ
pushとreplace、push履歴レコードを追加する方法と、replace現在のレコードを置き換える方法です。ルートがジャンプする場合、デフォルトはpush replaceモードをオンにする方法:<router-link replace .......>News</router-link>
9. プログラムによるルーティングナビゲーション
-
機能: ルーティング ジャンプの助けを借りずに、ルーティング ジャンプ
<router-link>をより柔軟にします。 -
特定のエンコーディング:
//$router的两个API this.$router.push({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.replace({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.forward() //前进 this.$router.back() //后退 this.$router.go() //可前进也可后退
10. キャッシュルーティングコンポーネント
-
機能: 表示されていない配線コンポーネントをマウントしたままにし、破棄しないようにします。
-
特定のエンコーディング:
<keep-alive include="News"> <router-view></router-view> </keep-alive>
11. 2 つの新しいライフサイクル フック
- 機能: ルーティング コンポーネントのアクティブ化ステータスをキャプチャするために使用される、ルーティング コンポーネントに固有の 2 つのフック。
- 具体的な名前:
activatedルーティング コンポーネントがアクティブ化されると発生します。deactivatedルーティング コンポーネントが非アクティブ化されるとトリガーされます。
12.ルートガード
-
役割: ルートの権限を制御する
-
カテゴリ: グローバル ガード、専用ガード、コンポーネント ガード
-
グローバルガード:
//全局前置守卫：初始化时执行、每次路由切换前执行 router.beforeEach((to,from,next)=>{ console.log('beforeEach',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则 next() //放行 }else{ alert('暂无权限查看') // next({name:'guanyu'}) } }else{ next() //放行 } }) //全局后置守卫：初始化时执行、每次路由切换后执行 router.afterEach((to,from)=>{ console.log('afterEach',to,from) if(to.meta.title){ document.title = to.meta.title //修改网页的title }else{ document.title = 'vue_test' } }) -
専用ガード：
beforeEnter(to,from,next){ console.log('beforeEnter',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school') === 'atguigu'){ next() }else{ alert('暂无权限查看') // next({name:'guanyu'}) } }else{ next() } } -
コンポーネント内のガード:
//进入守卫：通过路由规则，进入该组件时被调用 beforeRouteEnter (to, from, next) { }, //离开守卫：通过路由规则，离开该组件时被调用 beforeRouteLeave (to, from, next) { }
13. ルーターの 2 つの動作モード
- URLの場合、ハッシュ値は何ですか? —— # 以降の内容がハッシュ値です。
- ハッシュ値は HTTP リクエストに含まれません。つまり、ハッシュ値はサーバーに送信されません。
- ハッシュモード:
- 住所には常に # 記号が含まれていますが、これは美しくありません。
- 将来、サードパーティのモバイル アプリを通じてアドレスが共有された場合、アプリの検証が厳格であれば、そのアドレスは違法としてマークされます。
- 互換性が良くなります。
- 履歴モード:
- 住所は清潔で美しいです。
- 互換性はハッシュ モードよりもわずかに悪くなります。
- アプリケーションがデプロイされて起動されると、ページ サーバー 404 を更新する問題を解決するためにバックエンド担当者のサポートが必要になります。
©Shang Silicon Valley の Zhang Tianyu による Vue2.0+Vue3.0 チュートリアルのフルセットからの抜粋丨ルーティング コースウェア