Heim > Web-Frontend > js-Tutorial > Hauptteil

Drei Vue-Router-Methoden zum Springen zwischen Komponenten

小云云
Freigeben: 2018-05-14 16:44:16
Original
3538 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die drei Methoden von Vue-Router vor, um das Springen zwischen Komponenten zu realisieren. Ich hoffe, dass er jedem helfen kann.

bietet drei Möglichkeiten zum Springen:

① Ändern Sie die Routing-Adresse direkt in der Adressleiste

<!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:&#39;&#39;指定地址栏为空:默认为Login页面
      {path:&#39;&#39;,component:testLogin},
      {path:&#39;/myLogin&#39;,component:testLogin},
      {path:&#39;/myRegister&#39;,component:testRegister}
    ]

    const myRouter = new VueRouter({
      //myRoutes可以直接用上面的数组替换
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      //或者:
      /*
        router:new VueRouter({
            routes:[
              {path:&#39;/myLogin&#39;,component:testLogin},
      {path:&#39;/myRegister&#39;,component:testRegister}
            ]
        })
      */
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>
Nach dem Login kopieren

② Springen Sie über den Router-Link

<router-link to="/myRegister">注册</router-link>
Nach dem Login kopieren


 
 
 
  

  
 
 
 

{{msg}}

<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:&#39;&#39;,component:testLogin}, {path:&#39;/myLogin&#39;,component:testLogin}, {path:&#39;/myRegister&#39;,component:testRegister} ] const myRouter = new VueRouter({ routes:myRoutes }) new Vue({ router:myRouter, el:"#container", data:{ msg:"Hello VueJs" } }) </script>
Nach dem Login kopieren

③Durch js-Programmierung


jumpToLogin: function () {
this.$router.push(&#39;/myLogin&#39;);
}
Nach dem Login kopieren

Code




 
 
 
  

  
 
 
 

{{msg}}

<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(&#39;/myLogin&#39;); } }, template:` <p> <h1>这是我的注册页面</h1> <button @click="jumpToLogin">注册完成,去登录</button> </p> ` }) //配置路由词典 const myRoutes =[ {path:&#39;&#39;,component:testLogin}, {path:&#39;/myLogin&#39;,component:testLogin}, {path:&#39;/myRegister&#39;,component:testRegister} ] const myRouter = new VueRouter({ routes:myRoutes }) new Vue({ router:myRouter, el:"#container", data:{ msg:"Hello VueJs" } }) </script>
Nach dem Login kopieren

Verwandte Empfehlungen:

Detaillierte Erläuterung des Vue-Router-Routings und der Seitennavigation

Vue-Router-Routing-Parameter Detaillierte Lösung des Problems des Verschwindens nach der Aktualisierung

Die Vue-Router-Implementierungsseite lädt Beispiele für Spezialeffektmethoden

Das obige ist der detaillierte Inhalt vonDrei Vue-Router-Methoden zum Springen zwischen Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!