この記事では主に vue-router の詳細な説明を説明しますが、実際にエンタープライズ プロジェクトの他の記事を参照していただける場合は、この記事の 7. 注意事項セクションにリンクを置いています。
1.ルーターリンク
<router-link>ユーザーがルーティング機能を使用してアプリケーション内を移動 (クリック) できるようにし、ページをリロードせずに URL を変更でき、URL の生成とエンコードを処理します。
| 属性 | タイプ | 説明する |
|---|---|---|
| に | 文字列/オブジェクト | 宛先ルート/宛先オブジェクト |
| 交換する | ブール値 | ナビゲーション履歴を残さない |
| 追加する | ブール値 | 現在のパスの後にパス /a => /a/b を追加します |
| 鬼ごっこ | 文字列/オブジェクト | レンダリングするラベルの種類を指定する |
| 現役クラス | 文字列/オブジェクト | アクティブ化するときに使用されるクラス |
<router-link :to="{ path: '/login'}" replace tag="span"></router-link>
2.ルータービュー
<router-view>パスに一致するビューコンポーネントをレンダリングするために使用される機能コンポーネントであり、URLに対応するコンポーネントを表示します。
//方式一
<router-view></router-view>
//方式二 name是router设置里的name，会渲染对应的路由配置中 components下的相应组件
<router-view name="music"></router-view>
3. ルートパラメータの小道具
3.1 ブール方式を使用します。
ルーター構成ファイル、ルートの後にパラメーターを書き込み、props を true に設定します
{
path: '/music',
name: 'music',
component: () => import(/* webpackChunkName: "home" */ '@/pages/music/index.vue'),
props: true,
meta: {
title: '音乐',
current: '/music',
},
},
ページ A で、ジャンプで渡す必要があるパラメータ params を設定します。
//方式一
<router-link :to="{name:'music', params: {id: 'aaaaa'}}">跳转</router-link>
//方式二
toNext() {
this.$router.push({
name: 'music',
params: {
id: 'aaaaa'
}
})
}
ジャンプしたページBで、propsまたはthis.$paramsでパラメータを取得します。
//方式一
props: {
id: {
type: String,
default: ''
}
}
//方式二
this.$params.id
3.2 オブジェクトモード
ルータ設定ファイル
{
path: '/music',
name: 'music',
component: () => import(/* webpackChunkName: "home" */ '@/pages/music/index.vue'),
props: {
id: route.query.id, //使用query
age: route.params.name //使用params
},
meta: {
title: '音乐',
current: '/music',
},
},
Aページでジャンプを設定します
//方式一
<router-link :to="{name:'music',query: {id: 'aaaaa'}, params:{name:'音乐'}}" >跳转</router-link>
//方式二
toNext() {
this.$router.push({
name: 'music'
query: {
id: 'aaaaa'
},
params: {
name: '音乐'
}
})
}
ジャンプしたページBで、propsまたはthis.$paramsでパラメータを取得します。
//方式一
props: {
id: {
type: String,
default: ''
},
name: {
type: String,
default: ''
}
}
//方式二
this.$route.query.id
this.$route.params.name
4. ルーティングガード
vue-router が提供するナビゲーション ガードは、主にジャンプやキャンセルによってナビゲーションをガードするために使用されます。
| パラメータ | 説明する |
|---|---|
| に | 入力するターゲットルーティングオブジェクト |
| から | 現在のナビゲーションが出発するルート |
| 次 | コールバックメソッド |
例えば：
router.beforeEach((to, from, next) => {
//如果没有登录则,跳转login,否则进行下一步
if (to.name !== 'Login' && !isAuthenticated) next({
name: 'Login' })
else next()
})
このうちnextには以下のような利用方法があります
| 方法 | 説明する |
|---|---|
| 次（） | 次のフックに進みます |
| 次へ(偽) | ナビゲーションを中断し、URL が変更されている場合は、元のアドレスにリセットします。 |
| 次（'/'） | 現在のジャンプを中断して他のアドレスに移動すると、ルーティング オブジェクトを設定できます |
| 次へ(エラー) | ナビゲーションが終了し、エラーが onError() に渡されます。 |
4.1 グローバル解析ガード beforeResolve
router.beforeResolveは、データを取得するか、その他の操作を実行するためのものです。ナビゲーションするたびにトリガーされますが、ナビゲーションが確認される前、およびすべてのガードおよび非同期ルーティング コンポーネントが実行された後に、解析ガードが正しく呼び出されていることを確認してください。コンポーネントが解析されます。
router.beforeResolve(async to => {
if (to.meta.requiresCamera) {
try {
await askForCameraPermission()
} catch (error) {
if (error instanceof NotAllowedError) {
// ... 处理错误，然后取消导航
return false
} else {
// 意料之外的错误，取消导航并把错误传给全局处理器
throw error
}
}
}
})
4.2 グローバル ポストフック afterEach
ポストガードは次の関数を受け入れず、ナビゲーション自体を変更しません
router.afterEach((to, from) => {
// ...
})
4.3 ルーティング専用の beforeEnter ガード
ルーティング設定で専用の beforeEnter ガードを直接定義できます。これは、グローバル プレ ガードのメソッド パラメータと同じです。beforeEnterガードはルートに入るときにのみトリガーされ、パラメーター、クエリ、またはハッシュが変更されたときはトリガーされません。
たとえば、/users/2 から /users/3 へ、または /users/2#info から /users/2#projects へ。別のルートから移動する場合にのみトリガーされます。
const router = new VueRouter({
routes: [
{
path: '/music',
component: () => import(/* webpackChunkName: "home" */ '@/pages/music/index.vue'),
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
4.4 コンポーネント内のガード
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
const UserDetails = {
template: `...`,
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 `this` ！
// 因为当守卫执行时，组件实例还没被创建！
},
beforeRouteUpdate(to, from) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
},
beforeRouteLeave(to, from) {
// 在导航离开渲染该组件的对应路由时调用
// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
},
}
5. ナビゲーション分析プロセスを完了する
1. ナビゲーションがトリガーされます。
2. 非アクティブ化されたコンポーネントで beforeRouteLeave ガードを呼び出します。
3.Each ガードの前にグローバルを呼び出します。
4. 再利用されたコンポーネントで beforeRouteUpdate ガード (2.2 以降) を呼び出します。
5. ルーティング設定に入る前に呼び出します。
6. 非同期ルーティング コンポーネントを解析します。
7. アクティブ化されたコンポーネントで beforeRouteEnter を呼び出します。
8. グローバル beforeResolve ガード (2.5 以降) を呼び出します。
9. ナビゲーションが確認されました。
10. グローバルの afterEach フックを呼び出します。
11. DOM 更新をトリガーします。
12. beforeRouteEnter ガードで next に渡されたコールバック関数を呼び出すと、作成されたコンポーネント インスタンスがコールバック関数のパラメータとして渡されます。
6. ルーティングメタ情報
トランジション名、ルートにアクセスできるユーザーなど、ルートに任意の情報を付加したい場合は、属性を使用できます。metaコードは次のとおりです。
{
path: '/home',
name: 'home',
component: () => import(/* webpackChunkName: "home" */ '@/pages/home/home.vue'),
meta: {
title: '首页',
current: '/home',
},
},
//方法一，在vue页面获取
this.$route.meta.title
//方法二 在导航守卫获取
router.beforeEach((to, from) => {
console.log(to.meta.title)
})
7.注意点
1. Router-vue 公式 Web サイトのアドレス: https://router.vuejs.org/zh/guide/
2. Router にはヒストリーとハッシュの 2 つのモードがあります。デフォルトはハッシュです。私の構築プロジェクトのドキュメントを参照してください: [ vue create] 2. Esline、less、nprogress、ant-design-vue、環境変数 env、axios、vuex、Router、route Guard、ログイン ページを構成します。