ルーティング 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 のコアと深く統合されているため、単一ページのアプリケーションを簡単に構築できます。
• およびおよび

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

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

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

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

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

{ path: '/details/:id' name: 'Details' components: Details }

ログイン後にコピー
5. vue-router にはどのような種類のナビゲーション フックがありますか?

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

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

ログイン後にコピー

• from:Route、現在出発中のルートを表し、ルーティング オブジェクトでもあります。

• next:Function、次のメソッドです。

• next(): パイプラインに次のフックを入力します。すべてのフックが実行されると、ナビゲーション ステータスが確認されます (確認済み)。 )

  next(false): 端末の現在のナビゲーション。ブラウザの URL が変更された場合、URL は from ルートに対応するアドレスにリチャージされます。
  next('/')||next({path:'/'}): 別のアドレスにジャンプします。現在のナビゲーション端末で、新規ナビゲーションを実行します。
  #* 次のメソッドを呼び出す必要があります。そうしないとフック関数を解決できません。

グローバル ポストフック

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

ポストフックには next 関数がなく、ナビゲーション自体も変更されません。

• #ルート排他フック

beforEnter

• router.afterEach((to, from) = { // to do somethings })

  ログイン後にコピー
  コンポーネント内ナビゲーション フック

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

ログイン後にコピー

beforeRouterEnter は、ナビゲーションが確認される前にガードが呼び出されるため、これにアクセスできません。そのため、新しいコンポーネントはまだ作成されていません。コールバックを next に渡すことで、コンポーネント インスタンスにアクセスできます。ナビゲーションが確認されたときにコールバックを実行し、インスタンスをコールバックのメソッドパラメータとして使用します。

const Home = { template: `
         

          ログイン後にコピー
         
        

6. $route と $router の違いは何ですか?

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

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

const Home = { template: `
          

           ログイン後にコピー
          
         

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

  ログイン後にコピー

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

• ブラウザの強制更新パラメータはクリアされます。
  • beforeRouteUpdate(to, from, next){ // to do somethings }

    ログイン後にコピー
  • #Query:
  #パラメータはパスに表示され、更新はクリアされません

# を使用できます

• ##

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

  ログイン後にコピー
  9. vue-router の 2 つのモード
  ##hash

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

• history

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

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

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

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

以上是经过参考很多同行分享与官方文档，汇总的一份总结，如有不对，请指出，最后感谢大家观看，求点赞，求分享，求评论，求打赏~~

更多编程相关知识，请访问：编程视频！！

以上がルーティング vue-router に関する vuejs インタビューの質問 10 件 (回答分析を含む)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。