ルーティング vue-router に関する vuejs インタビューの質問 10 件 (回答分析を含む)-Vue.js-php.cn

ルーティング vue-router に関する vuejs インタビューの質問 10 件 (回答分析を含む)

青灯夜游

リリース： 2022-05-17 09:48:51

転載

7612 人が閲覧しました

この記事では、ルーティング vue-router に関する vuejs 面接の質問 10 個を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

ルーティング vue-router に関する vuejs インタビューの質問 10 件 (回答分析を含む)

ルーティング vue-router 面接の質問

1. mvvm フレームワークとは何ですか?

mvvm は Model-View-ViewModel です。mvvm の設計原理は mvc に基づいています。

MVVM は Model-View-ViewModel の略です。Model はデータモデルを表し、ビジネスロジックとデータを担当します。カプセル化、ビューはインターフェイスと表示を担当する UI コンポーネントを表し、ViewModel はモデルデータの変更を監視し、ビューの動作を制御し、ユーザーインタラクションを処理し、ビューレイヤーとモデルレイヤーを双方向で接続します。データバインディング。 MVVM アーキテクチャでは、View と Model は直接接続されず、ViewModel を介して相互作用するため、ビジネスロジックのみに注目し、DOM を手動で操作する必要はなく、View と Model の同期を意識する必要もありません。 (学習ビデオ共有: vue ビデオチュートリアル )

2. vue-router とは何ですか?コンポーネントは何ですか?

Vue Router は、Vue.js の公式ルーティングマネージャーです。 Vue.js のコアと深く統合されているため、単一ページのアプリケーションを簡単に構築できます。
<router-link> および <router-view> および <keep-alive>

3.アクティブクラスはどのコンポーネントの属性ですか?

active-class はルーターリンクの終端属性で、選択したスタイルを切り替えるために使用されます。このスタイルはルーターリンクのラベルをクリックすると適用されます

4 . vue-routerの動的ルーティングを定義するにはどうすればよいですか？渡された値を取得するにはどうすればよいですか?

動的ルートの作成には、主に path 属性の使用が含まれます。動的パスパラメーターは、次のようにコロンで始まり、使用されます。詳細ディレクトリ詳細/a、詳細/b などのすべてのファイルは、詳細コンポーネントにマップされます。

/details の下のルートと一致する場合、パラメータ値は this.$route.params に設定されるため、この属性を通じて動的パラメータを取得できます

{
  path: &#39;/details/:id&#39;
  name: &#39;Details&#39;
  components: Details
}

ログイン後にコピー

グローバルフロントガード

console.log(this.$route.params.id)

ログイン後にコピー

to:Route、入力するターゲットを表し、ルーティングオブジェクトです。

from:Route、現在出発中のルートを表し、ルーティングオブジェクトでもあります。
next:Function、次のメソッドです。
next(): パイプラインに次のフックを入力します。すべてのフックが実行されると、ナビゲーションステータスが確認されます (確認済み)。 )
#* 次のメソッドを呼び出す必要があります。そうしないとフック関数を解決できません。

グローバルポストフック

const router = new VueRouter({})
router.beforeEach((to, from, next) = {
  // to do somethings
})

ログイン後にコピー

#ルート排他フック

const router = new VueRouter({
  routes: [
    {
      path: &#39;/home&#39;,
      component: Home，
      beforeEnter: (to, from, next) = {
        // to do somethings
        // 参数与全局守卫参数一样
    	}
    }
  ]
})

ログイン後にコピー

const Home = {
  template: `<div</div`,
  beforeRouteEnter(to, from, next){
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不能获取组件实例 ‘this’，因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next){
    // 在当前路由改变，但是该组件被复用时调用
    // 例：对于一个动态参数的路径 /home/:id,在/home/1 和 /home/2 之间跳转的时候
    // 由于会渲染同样的 Home 组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 &#39;this&#39;
  },
  beforeRouteLeave(to, from, next){
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 &#39;this&#39;
  }
}

ログイン後にコピー

router は VueRouter のインスタンスで、ルーティングジャンプメソッドやフック関数などが含まれるグローバルルーティングオブジェクトです。 route はルーティング情報オブジェクトです||ジャンプルーティングオブジェクトです。各ルートにはローカルオブジェクトであるルートオブジェクトがあり、パス、パラメータ、ハッシュ、クエリ、フルパス、一致、名前などのルーティング情報が含まれます。、などのパラメータ。

#7. vue-router はルーティングパラメーターの変更に応答します

監視を使用して検出します

const Home = { template: `<div</div`, beforeRouteEnter(to, from, next){ next( vm = { // 通过 'vm' 访问组件实例 }) } }
ログイン後にコピー

コンポーネント内のナビゲーションフック関数

// 监听当前路由发生变化的时候执行
watch: {
  $route(to, from){
    console.log(to.path)
    // 对路由变化做出响应
  }
}

ログイン後にコピー

8. vue-router にパラメータを渡す

Params

名前のみが可能パスを使用する場合は使用しないでください。

パラメータはパスに表示されません

ブラウザの強制更新パラメータはクリアされます。
- ```
beforeRouteUpdate(to, from, next){
  // to do somethings
}
```
  ログイン後にコピー
- #Query:
#パラメータはパスに表示され、更新はクリアされません

name はパス path

  // 传递参数
  this.$router.push({
    name: Home，
    params: {
    	number: 1 ,
    	code: &#39;999&#39;
  	}
  })
  // 接收参数
  const p = this.$route.params

ログイン後にコピー

原理これは onhashchage イベントであり、ウィンドウオブジェクトで監視できます。このイベント

// 传递参数
this.$router.push({
  name: Home，
  query: {
  number: 1 ,
  code: &#39;999&#39;
}
                  })
// 接收参数
const q = this.$route.query

ログイン後にコピー

history
- 利用了HTML5 History Interface 中新增的pushState()和replaceState()方法。
- 需要后台配置支持。如果刷新时，服务器没有响应响应的资源，会刷出404，

10. vue-router实现路由懒加载（动态加载路由）

把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率

const router = new VueRouter({
  routes: [
    {
      path: &#39;/home&#39;,
      name: &#39;Home&#39;，
      component:() = import(&#39;../views/home&#39;)
		}
  ]
})

ログイン後にコピー