Home > Article > Web Front-end > Three ways for Vue-Router to jump between components

Three ways for Vue-Router to jump between components

小云云Original: 2018-01-19 14:04:291913browse

This article mainly introduces the three methods of Vue-Router to jump between components in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Use VueRouter to implement jumps between components for your reference. The specific content is as follows

Provides 3 ways to implement jumps:

① Directly modify the routing address in the address bar

<!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>

② Jump through router-link

<router-link to="/myRegister">注册</router-link>



 
 
 
  

  
 
 
 
    
{{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>

③Through js programming

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

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>

Related recommendations:

About vue-router to implement jump parameter transfer between components

Example details Detailed explanation of child and parent communication between vue components (2)

Vue.js must learn the communication between components every day

The above is the detailed content of Three ways for Vue-Router to jump between components. For more information, please follow other related articles on the PHP Chinese website!

vue.js JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary sharing of Vue routing hooks and application scenariosNext article：Summary sharing of Vue routing hooks and application scenarios

See more

Three ways for Vue-Router to jump between components

Related articles