Maison interface Web js tutoriel Comment sauter des composants les uns aux autres

Comment sauter des composants les uns aux autres

Apr 14, 2018 pm 05:16 PM
实现 组件

Cette fois, je vais vous montrer comment sauter des composants entre eux et quelles sont les précautions pour réaliser le saut de composants entre eux. Ci-dessous un cas pratique, jetons un coup d'oeil.

VueRouter est utilisé pour implémenter des sauts entre les composants pour votre référence. Le contenu spécifique est le suivant

. Fournit 3 façons de sauter :

① Modifiez directement l'adresse de routage

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
  <script src="js/vue.js"></script>
<!-- 引入文件 -->
  <script src="js/vue-router.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
    <router-view></router-view>
  </p>
  <script>
    var testLogin = Vue.component("login",{
      template:`
        <p>
          <h1>这是我的登录页面</h1>
        </p>
    })
    var testRegister = Vue.component("register",{
      template:`
        <p>
          <h1>这是我的注册页面</h1>
        </p>
    })
    //配置路由词典
    //对象数组
    const  myRoutes =[
    //当路由地址:地址栏中的那个路径是myLogin访问组件
    //组件是作为标签来用的所以不能直接在component后面使用
    //要用返回值
      //path:''指定地址栏为空:默认为Login页面
      {path:'',component:testLogin},
      {path:'/myLogin',component:testLogin},
      {path:'/myRegister',component:testRegister}
    ]
    const myRouter = new VueRouter({
      //myRoutes可以直接用上面的数组替换
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      //或者:
      /*
        router:new VueRouter({
            routes:[
              {path:'/myLogin',component:testLogin},
      {path:'/myRegister',component:testRegister}
            ]
        })
      */
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>
Copier après la connexion

dans la barre d'adresse ②Sauter via le lien du routeur

<router-link to="/myRegister">注册</router-link>
Copier après la connexion
<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
  <script src="js/vue.js"></script>
<!-- 引入文件 -->
  <script src="js/vue-router.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
    <router-view></router-view>
  </p>
  <script>
    var testLogin = Vue.component("login",{
      template:`
        <p>
          <h1>这是我的登录页面</h1>
          &lt;router-link to=&quot;/myRegister&quot;&gt;注册&lt;/router-link&gt;
        </p>
      `
      /*to后面是路由地址*/
    })
    var testRegister = Vue.component("register",{
      template:`
        <p>
          <h1>这是我的注册页面</h1>
        </p>
    })
    //配置路由词典
    const  myRoutes =[
      {path:'',component:testLogin},
      {path:'/myLogin',component:testLogin},
      {path:'/myRegister',component:testRegister}
    ]
    const myRouter = new VueRouter({
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>
Copier après la connexion

③Par js programmation méthode

jumpToLogin: function () {
this.$router.push('/myLogin');
}
Copier après la connexion

Code

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
  <script src="js/vue.js"></script>
<!-- 引入文件 -->
  <script src="js/vue-router.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
    <router-view></router-view>
  </p>
  <script>
    var testLogin = Vue.component("login",{
      template:`
        <p>
          <h1>这是我的登录页面</h1>
          &lt;router-link to=&quot;/myRegister&quot;&gt;注册&lt;/router-link&gt;
        </p>
      `
      /*to后面是路由地址*/
    })
    var testRegister = Vue.component("register",{
      methods:{
        jumpToLogin:function(){
          this.$router.push('/myLogin');
        }
      },
      template:`
        <p>
          <h1>这是我的注册页面</h1>
          <button @click="jumpToLogin">注册完成,去登录</button>
        </p>
      `
    })
    //配置路由词典
    const  myRoutes =[
      {path:'',component:testLogin},
      {path:'/myLogin',component:testLogin},
      {path:'/myRegister',component:testRegister}
    ]
    const myRouter = new VueRouter({
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :



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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment installer le composant DirectPlay de l'ancienne version de Windows 10 Comment installer le composant DirectPlay de l'ancienne version de Windows 10 Dec 28, 2023 pm 03:43 PM

Comment installer le composant DirectPlay de l'ancienne version de Windows 10

Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Mar 24, 2024 am 11:27 AM

Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ?

Utilisez Java pour écrire du code pour implémenter l'animation amoureuse Utilisez Java pour écrire du code pour implémenter l'animation amoureuse Dec 23, 2023 pm 12:09 PM

Utilisez Java pour écrire du code pour implémenter l'animation amoureuse

Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei Mar 24, 2024 pm 06:03 PM

Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei

Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci Mar 20, 2024 pm 04:54 PM

Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci

Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes Mar 15, 2024 pm 04:51 PM

Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes

Découvrez comment Golang offre des possibilités de développement de jeux Découvrez comment Golang offre des possibilités de développement de jeux Mar 16, 2024 pm 12:57 PM

Découvrez comment Golang offre des possibilités de développement de jeux

Guide de mise en œuvre des exigences du jeu PHP Guide de mise en œuvre des exigences du jeu PHP Mar 11, 2024 am 08:45 AM

Guide de mise en œuvre des exigences du jeu PHP

See all articles