10 questions d'entretien avec vuejs sur le routage vue-router (y compris l'analyse des réponses)

Cet article vous présentera 10 questions d'entretien avec Vuejs sur le routage vue-router. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Questions d'entretien de routage avec vue-router

1. Qu'est-ce que le framework mvvm ?

mvvm est Model-View-ViewModel Le principe de conception de mvvm est basé sur mvc

MVVM est l'abréviation de Model-View-ViewModel représente le modèle de données et. est responsable de la logique métier et des données. View représente le composant d'interface utilisateur responsable de l'interface et de l'affichage. ViewModel surveille les modifications des données du modèle et contrôle le comportement de l'affichage, gère l'interaction de l'utilisateur et connecte simplement la couche View et la couche Model de manière bidirectionnelle. liaison de données. Dans l'architecture MVVM, View et Model ne sont pas directement connectés, mais interagissent via ViewModel. Nous nous concentrons uniquement sur la logique métier et n'avons pas besoin d'exploiter manuellement le DOM, ni de prêter attention à la synchronisation de View et Model. (Partage vidéo d'apprentissage : tutoriel vidéo vue)

2. Qu'est-ce que vue-router ? Quels sont les composants ?

• Vue Router est le gestionnaire de routage officiel de Vue.js. Il est profondément intégré au cœur de Vue.js, ce qui facilite la création d'applications d'une seule page.
• <router-link> et <router-view> et <keep-alive>

3. active-class est un attribut de quel composant ?

active-class est l'attribut du terminal router-link, utilisé pour changer le style sélectionné lorsque vous cliquez sur l'étiquette router-link, ce style sera appliqué

. 4 . Comment définir le routage dynamique de vue-router ? Comment obtenir la valeur transmise ?

• La création d'itinéraires dynamiques consiste principalement à utiliser l'attribut path, à l'aide de paramètres de chemin dynamique, commençant par deux points, comme suit :

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

Accès au Répertoire de détails Tous les fichiers, tels que détails/a, détails/b, etc., seront mappés au composant Détails.

• Lors de la correspondance de l'itinéraire sous /details, la valeur du paramètre sera définie sur this.$route.params, afin que les paramètres dynamiques puissent être obtenus via cet attribut

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

5. Quels types de hooks de navigation possède vue-router ?

• Global front guard

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

• to:Route, représente la cible à entrer, qui est un objet de routage.

• from:Route, représente l'itinéraire qui part actuellement, et est également un objet de routage

• next:Function, une méthode qui doit être appelé, L'effet d'exécution spécifique dépend des paramètres appelés par la méthode suivante

  • next() : Entrez le hook suivant dans le pipeline. Si tous les hooks sont exécutés, l'état de navigation est confirmé (confirmé). )
  • next(false) : La navigation actuelle du terminal. Si l'URL du navigateur change, l'URL sera rechargée à l'adresse correspondant à l'itinéraire d'origine.
  • next(’/’)||next({path:’/’}) : accédez à une autre adresse. Terminal de navigation actuel, effectuer une nouvelle navigation.

* La méthode suivante doit être appelée, sinon la fonction hook ne peut pas être résolue

• Global post hook

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

• Le post hook n'a pas de fonction suivante et ne modifie pas non plus la navigation elle-même.

• Hook exclusif d'itinéraire

  • beforeEnter

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

• Hook de navigation intégré

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;
  }
}

• beforeRouterEnter ne peut pas y accéder car le garde est appelé avant que la navigation ne soit confirmée, donc le nouveau composant n'a pas encore été créé. Vous pouvez accéder à l'instance du composant en passant un rappel à next. Exécutez le rappel lorsque la navigation est confirmée et utilisez l'instance comme paramètre de méthode du rappel.

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

6. Quelle est la différence entre $route et $router ?

• router est une instance de VueRouter. Il s'agit d'un objet de routage global qui comprend des méthodes de saut d'itinéraire, des fonctions de hook, etc.
• route est un objet d'informations de routage||objet de routage sautant. Chaque route aura un objet route, qui est un objet local et contient des informations de routage telles que le chemin, les paramètres, le hachage, la requête, le chemin complet, la correspondance, le nom. , etc. paramètre.

7. vue-router répond aux changements dans les paramètres de routage

• Utilisez la montre pour détecter

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

• Fonction de crochet de navigation dans le composant

beforeRouteUpdate(to, from, next){
  // to do somethings
}

8. vue-router passant les paramètres

• Params
  • ne peut être utilisé que name, not Utilisation du paramètre path
  • ne sera pas affiché sur le chemin
  • Le paramètre d'actualisation forcée du navigateur sera effacé,

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

• Requête :

  • Les paramètres seront affichés sur le chemin et l'actualisation ne sera pas effacée
  • nom Vous pouvez utiliser le chemin chemin

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

9. Deux modes de vue-router

• hash

  • Le principe est l'événement onhashchage, qui peut être surveillé sur l'objet window Cet événement

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL)
  let hash = location.hash.slice(1)
}

• historique

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

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

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

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!