javascript - Utilisez VUE2.0 pour obtenir l'effet suivant

Question

Adresse Web

J'ai appris VUE par moi-même récemment et je souhaite utiliser VUE pour créer quelque chose. Ensuite, j'ai trouvé un exemple de site Web personnel sur Internet. Je voulais implémenter la partie du site Web où je clique sur le titre de l'article pour saisir les détails de l'article. Est-il possible d'utiliser vue-router ?

Donnez-moi vos avis, merci !

Answer 1

Si on me demandait de le faire, j'utiliserais un routeur, car les détails des différents articles sont généralement cohérents dans leur style, j'écris donc généralement un composant de détail pour le problème de la transmission des valeurs, je transmets généralement l'identifiant de l'article. l'avoir. Environ trois méthodes

• Splice les paramètres de la requête dans l'URL, soit sous forme de chemin, soit sous forme de paramètre

• Gérer via bus

• Enregistrer dans vuex pour la gestion

Answer 2

Utilisez vue-router, vous pouvez ajouter un événement de clic, puis appeler la méthode this.$router.push pour sauter l'itinéraire, et vous pouvez également transmettre des paramètres.
Donnez-moi un exemple :

Événement de clic sur le titre de l'article :

//name是路由的名字也可以用path，query中是参数，放在url中
this.$router.push({name: 'MemberMenu', query: {id: 233, title: 'hello'}})
//url: xxx.com/MemberMenu?id=233&title=hello

Obtenez les paramètres de la page de détails de l'article :

    // 获取url参数
    getUrl (name) {
      let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      let r = window.location.search.substr(1).match(reg)
      if (r !== null) {
        // 解决乱码问题
        return decodeURIComponent(decodeURI(r[2]))
      }
      return null
    }