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

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)

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

• 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: `<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;
    }
  }

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

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

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

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

const Home = {
  template: `<div</div`,
  beforeRouteEnter(to, from, next){
    next( vm = {
      // 通过 &#39;vm&#39; 访问组件实例
    })
  }
}

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

• // 监听当前路由发生变化的时候执行
  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: '999'
    	}
    })
    // 接收参数
    const p = this.$route.params

  9. vue-router の 2 つのモード
  • ##hash

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

// 传递参数
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 サイトの他の関連記事を参照してください。