Three ways for Vue-Router to jump between components-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Three ways for Vue-Router to jump between components

小云云

Jan 19, 2018 pm 02:04 PM

vue-routermethodcomponents

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 id="这是我的登录页面">这是我的登录页面</h1>
        </p>
      `
    })
    var testRegister = Vue.component("register",{
      template:`
        <p>
          <h1 id="这是我的注册页面">这是我的注册页面</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 id="这是我的登录页面">这是我的登录页面</h1>
          &lt;router-link to=&quot;/myRegister&quot;&gt;注册&lt;/router-link&gt;
        </p>
      `
      /*to后面是路由地址*/
    })
    var testRegister = Vue.component("register",{
      template:`
        <p>
          <h1 id="这是我的注册页面">这是我的注册页面</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 id="这是我的登录页面">这是我的登录页面</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 id="这是我的注册页面">这是我的注册页面</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!

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

Vue应用中遇到vue-router的错误“NavigationDuplicated: Avoided redundant navigation to current location” – 怎么解决？Jun 24, 2023 pm 02:20 PM

Vue应用中遇到vue-router的错误“NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation”–怎么解决？Vue.js作为快速而灵活的JavaScript框架在前端应用开发中越来越受欢迎。VueRouter是Vue.js的一个代码库，用于进行路由管理。然而，有时

一文深入详解Vue路由：vue-routerSep 01, 2022 pm 07:43 PM

本篇文章带大家详解Vue全家桶中的Vue-Router，了解一下路由的相关知识，希望对大家有所帮助！

Vue-Router: 如何使用路由元信息来管理路由？Dec 18, 2023 pm 01:21 PM

Vue-Router:如何使用路由元信息来管理路由？简介：Vue-Router是Vue.js官方的路由管理器，它可以帮助我们快速构建单页应用程序（SPA）。除了常见的路由功能外，Vue-Router还支持使用路由元信息来管理和控制路由。路由元信息是可以附加到路由上的自定义属性，它可以帮助我们实现一些特殊的逻辑或者权限控制。一、什么是路由元信息？路由元信息是

在Vue应用中使用vue-router时出现“Error: Avoided redundant navigation to current location”怎么解决？Jun 24, 2023 pm 05:39 PM

在Vue应用中使用vue-router时，有时候会出现“Error:Avoidedredundantnavigationtocurrentlocation”的错误信息。这个错误信息的意思是“避免了到当前位置的冗余导航”，通常是因为重复点击了同一个链接或者使用了相同的路由路径导致的。那么，怎么解决这个问题呢？使用exact修饰符在定义router

在Vue应用中使用vue-router时出现“Error: Failed to resolve async component: xxx”怎么解决？Jun 24, 2023 pm 06:28 PM

在Vue应用中使用vue-router是一种常见的方式来实现路由控制。然而，在使用vue-router的时候，有时候会出现“Error:Failedtoresolveasynccomponent:xxx”的错误，这是由于异步组件加载错误导致的。在本文中，我们将探讨这个问题，并提供解决方案。理解异步组件加载原理在Vue中，组件可以被同步或异步地创建

在Vue应用中使用vue-router时出现“Error: Invalid route component: xxx”怎么解决？Jun 25, 2023 am 11:52 AM

Vue是一个流行的前端框架，它允许开发者快速构建高效、可重用的web应用程序。Vue-router是Vue框架中的一个插件，可以帮助开发者轻松管理应用的路由和导航。但是，在使用Vue-router的过程中，有时候会遇到一个常见的错误：“Error:Invalidroutecomponent:xxx”。这篇文章将介绍这个错误的原因和解决方法。原因在Vu

Vue和Vue-Router: 如何在组件之间共享数据？Dec 17, 2023 am 09:17 AM

Vue和Vue-Router:如何在组件之间共享数据？简介：Vue是一个流行的JavaScript框架，用于构建用户界面。Vue-Router是Vue的官方路由管理器，用于实现单页面应用。在Vue应用中，组件是构建用户界面的基本单位。在许多情况下，我们需要在不同的组件之间共享数据。本文将介绍一些方法，帮助你在Vue和Vue-Router中实现数据共享，以及

在Vue应用中使用vue-router时出现“Uncaught TypeError: Cannot read property 'push' of undefined”怎么解决？Aug 18, 2023 pm 09:24 PM

最近我尝试在Vue应用中使用vue-router，但遇到了一个问题：“UncaughtTypeError:Cannotreadproperty'push'ofundefined”。这个问题的原因是什么，以及如何解决呢？首先，让我们了解一下vue-router。vue-router是Vue.js官方的路由管理插件，可以帮助我们构建单页应用（SPA

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Hot Tools

Atom editor mac version download

The most popular open source editor

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),