VueRouterの基本的なレビュー

一目でハイライト

マインドマップリンク：https：//www.processon.com/view/link/602f374e6376891d5f86f8d1

VueRouterの基本的な使用法

HTML1
。ルーティングコンポーネントのプレースホルダーを作成します

<!-- 路由匹配到的组件将渲染在这里 -->
<router-view>

2.リンクを作成します

<!-- 通过传入 `to` 属性指定链接 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

JS1
。はじめに

import Vue from "vue"
import VueRouter from "vue-router"

2.ルーティングプラグインを登録します

Vue.use(VueRouter)

3.ルーティングルールを定義します

const routes = [
	{
    
    
		path:"/",
		name:"index",
		component: Index
	}
]

4.ルーティングオブジェクトを作成します

const router = new VueRouter({
    
    
	routes
})

5.ルーターオブジェクトをVueインスタンスに登録します

new Vue({
    
    
  router,
  render: h => h(App)
}).$mount("#app")

ルーターの注入後、this.$routerアクセスルーターの任意のコンポーネントによってthis.$route、現在のルートにアクセスすることもできます。

---

$ router

ルーターであるvueRouterインスタンスは、Vueルートインスタンスのルーター構成を介して渡されます。

小道具

属性	の種類	説明
アプリ	インスタンスビュー	ルーターが構成されたVueルートインスタンス
モード	ストリング	ルートで使用されるモード
currentRoute	ルート	現在のルートに対応するルーティング情報オブジェクト（つまり$ route）
START_LOCATION	ルート	初期ルーティングアドレスをルーティングオブジェクトの形式、つまりルーティングが開始される場所で表示します。初期ナビゲーションを区別するためにナビゲーションガードで使用できます

メソッド

方法	説明	備考
beforeEach
beforeResolve
afterEach
押す
交換
行く
バック
フォワード
getMatchedComponents
解決する
addRoutes
addRoute
addRoute
getRoutes
onReady
onError

---

$ route

現在のルートオブジェクトは、現在アクティブ化されているルートのステータス情報を表します。不変で、ナビゲーションが成功するたびに新しいオブジェクトが生成されます。

小道具

属性	の種類	説明
道	ストリング	現在のルートに対応するパスは、常に「/foo/bar」などの絶対パスとして解決されます。
パラメータ	オブジェクト	動的フラグメントと完全一致フラグメントを含むキー/値オブジェクト。例：パターン/user/:username、マッチングパス/user/evan、$route.params ={ username: 'evan' }
クエリ	オブジェクト	URLクエリパラメータを表すキー/値オブジェクト。たとえば、パスの/foo?user=1場合、$route.query.user == 1
ハッシュ	ストリング	現在のルートのハッシュ値（＃付き）
フルパス	ストリング	クエリパラメータとハッシュのフルパスを含む、解析されたURL
一致	アレイ	現在のルートのすべてのネストされたパスフラグメントのルーティングレコードを含む配列
名前	ストリング	現在のルートの名前
redirectedFrom	ストリング	リダイレクションがある場合は、リダイレクションが発生したルートの名前です。

---

動的ルーティング

使用する

特定のパターンに一致するすべてのルートは、すべて同じコンポーネントにマップされます。たとえば、製品の詳細ページは詳細コンポーネントを使用します。

const router = new VueRouter({
    
    
  routes: [
    // 动态路径参数 以冒号开头
    {
    
     
    	path: '/detail/:id', 
    	component: Detail
    }
  ]
})

パスパラメータを取得する

• $route.params買収を通じて直接。「パス引数」コロン:マーク。ルートが一致すると、パラメータ値はthis。$ route.paramsに設定され、各コンポーネントで使用できます。

モード	マッチパス	$ route.params
/ user /：username	/ user / evan	{ユーザー名： 'evan'}
/ user /：username / post /：post_id	/ user / evan / post / 123	{ユーザー名： 'evan'、post_id： '123'}

• 小道具を通して受け取ります。ルーティング構成で設定する必要がありますprops:true

const router = new VueRouter({
    
    
  routes: [
    {
    
     
    	path: '/detail/:id', 
    	component: Detail,
    	props: true //通过props把参数传递给组件
    }
  ]
})

ルーティングパラメータの変更に対応する

注意！当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。这意味着组件的生命周期钩子不会再被调用。
需要对路由参数的变化作出响应，可以通过以下两种方式：

1. watch (监测变化) $route 对象

const User = {
    
    
  template: '...',
  watch: {
    
    
    $route(to, from) {
    
    
      // 对路由变化作出响应...
    }
  }
}

2. 使用 beforeRouteUpdate 进行导航守卫

const User = {
    
    
  template: '...',
  beforeRouteUpdate (to, from, next) {
    
    
      // 对路由变化作出响应...
      // 记得要调用 next()
  }
}

---

路由嵌套

需要进行路由嵌套，在路由规则中使用 children 配置即可：

const router = new VueRouter({
    
    
  routes: [
    {
    
     path: '/user/:id', component: User,
      children: [
        {
    
    
          // 当 /user/:id/profile 匹配成功，UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
    
    
          // 当 /user/:id/posts 匹配成功，UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        },
        {
    
     
	        // 提供一个【空的】子路由，当 /user/:id 匹配成功，UserHome 会被渲染在 User 的 <router-view> 中
	        // 如果没有提供这个空的子路由，User 的出口不会渲染任何东西。
        	path: '', 
        	component: UserHome
        }
      ]
    }
  ]
})

---

编程式导航

• router.push
• router.replace
• router.go

router.push(location, onComplete?, onAbort?)

参数可以是一个字符串路径，或者一个描述地址的对象

// 字符串
router.push('home')

// 对象
router.push({
    
     path: 'home' })

// 命名的路由（可以使用 name 而不用 path）
router.push({
    
     name: 'user'}) 

// 命名的路由，带参数
router.push({
    
     name: 'user', params: {
    
     userId: '123' }})  // => /user/123 

// 带查询参数
router.push({
    
     path: 'register', query: {
    
     plan: 'private' }}) // => /register?plan=private

注意：如果提供了 path，params 会被忽略。

const userId = '123'

// name + params
router.push({
    
     name: 'user', params: {
    
     userId }}) // -> /user/123

// 带有手写参数的 path
router.push({
    
     path: `/user/${
      
      userId}` }) // -> /user/123

// 错误使用：这里的 params 不生效
router.push({
    
     path: '/user', params: {
    
     userId }}) // -> /user 

router.replace(location, onComplete?, onAbort?)

与 router.push 基本相同，唯一的不同就是，它不会向 history 添加新记录，而是替换当前记录。

router.go(n)

参数是一个整数，意思是在 history 记录中向前或者后退多少步。类似 window.history.go(n)

---

VueRouter 路由守卫

1）全局级别

前置守卫：beforeEach

解析守卫：beforeResolve

导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用

后置钩子：afterEach

不会接受 next 函数也不会改变导航本身。

2）路由级别

前置守卫：beforeEnter

在路由规则中给特定路由进行配置。

 const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
    
    
        // ...
      }
    }
  ]
})

3）组件级别

beforeRouteEnter

コンポーネントインスタンスが作成されておらず、コンポーネントインスタンスを取得できませんthis。ただし、次のコールバックを通じてコン​​ポーネントインスタンスを取得できます（ナビゲーションが確認されるとコールバックが実行され、コンポーネントインスタンスがコールバックメソッドのパラメータとして使用されます。RouteEnterがコールバックの受け渡しをサポートする前にのみ）

beforeRouteEnter (to, from, next) {
    
    
  next(vm => {
    
    
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteUpdate

現在のルートが変更されたときに呼び出されますが、コンポーネントは再利用されます

beforeRouteLeave

ナビゲーションがコンポーネントの対応するルートを離れるときに呼び出され、この時点でもコンポーネントインスタンスを取得できます this

4）パラメータ分析

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

• to：Route、入力するターゲットルートオブジェクト
• from：ルーター、現在のナビゲーションが出発しようとしているルート
• 次へ：関数、このメソッドを呼び出してこのフックを解決します