Vue-Router实现组件间跳转的三种方法

通过VueRouter来实现组件之间的跳转，供大家参考，具体内容如下

提供了3种方式实现跳转：

①直接修改地址栏中的路由地址

<!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>
 <div id="container">
  <p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
  <router-view></router-view>
 </div>
 <script>
  var testLogin = Vue.component("login",{
   template:`
    <div>
     <h1>这是我的登录页面</h1>
    </div>
   `
  })
  var testRegister = Vue.component("register",{
   template:`
    <div>
     <h1>这是我的注册页面</h1>
    </div>
   `
  })
  //配置路由词典
  //对象数组
  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>

②通过router-link实现跳转

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

<!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>
 <div id="container">
  <p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
  <router-view></router-view>

 </div>
 <script>
  var testLogin = Vue.component("login",{
   template:`
    <div>
     <h1>这是我的登录页面</h1>
     <router-link to="/myRegister">注册</router-link>
    </div>
   `
   /*to后面是路由地址*/
  })
  var testRegister = Vue.component("register",{
   template:`
    <div>
     <h1>这是我的注册页面</h1>
    </div>
   `
  })
  //配置路由词典
  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>

③通过js的编程的方式

jumpToLogin: function () {
this.$router.push('/myLogin');
}

代码

<!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>
 <div id="container">
  <p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
  <router-view></router-view>

 </div>
 <script>
  var testLogin = Vue.component("login",{
   template:`
    <div>
     <h1>这是我的登录页面</h1>
     <router-link to="/myRegister">注册</router-link>
    </div>
   `
   /*to后面是路由地址*/
  })
  var testRegister = Vue.component("register",{
   methods:{
    jumpToLogin:function(){
     this.$router.push('/myLogin');
    }
   },
   template:`
    <div>
     <h1>这是我的注册页面</h1>
     <button @click="jumpToLogin">注册完成,去登录</button>
    </div>
   `
  })
  //配置路由词典
  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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VueJs路由跳转——vue-router的使用详解

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ​p

  • vue-router跳转页面的方法

    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下 <div id="app"> <p> <!-- 使用 router-link 组件来导航. --> <

  • vue-router跳转时打开新页面的两种方法

    最近还是在痛苦的挣扎中 挣扎吧 记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持

  • vue-router：嵌套路由的使用方法

    vue-router：嵌套路由的使用方法

    模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路

  • vue的传参方式汇总和router使用技巧

    vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ // 这个id是一个变量,随便是什么值都可以 path: /describe/${id}`, }) 3,获取方法(在describe页面) $route.params.id 使用以上方法可以拿到上个页面传过来的id值 vue

  • 关于Vue Router的10条高级技巧总结

    关于Vue Router的10条高级技巧总结

    前言 Vue Router 是 Vue.js官方的路由管理器. 它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌. 包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 本文是作者是实际项目中遇到的一些总结,主要包括: 响应路由参数变化 路由匹配 高级匹配模

  • vue router使用query和params传参的使用和区别

    vue router使用query和params传参的使用和区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456

  • Vue-Router来实现组件间跳转的三种方法

    通过VueRouter来实现组件之间的跳转,供大家参考,具体内容如下 提供了3种方式实现跳转: ①直接修改地址栏中的路由地址 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <!-- 引入文件 --> &

  • Vue-Router实现组件间跳转的三种方法

    通过VueRouter来实现组件之间的跳转,供大家参考,具体内容如下 提供了3种方式实现跳转: ①直接修改地址栏中的路由地址 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <!-- 引入文件 --> &

  • vue项目退出登录清除store数据的三种方法

    vue项目退出登录清除store数据的三种方法

    目录 方法一:(不友好,页面会白屏,不推荐使用) 方法二 : (不会出现白屏,推荐使用) 方法三 : vuex清除token (不会出现白屏,推荐使用) 总结 方法一:(不友好,页面会白屏,不推荐使用) 在退出登录的loginOut 方法里面: window.location.reload() 方法二 : (不会出现白屏,推荐使用) 利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if="is

  • Android启动页面定时跳转的三种方法

    从我所做的项目来看,几乎都少不了开始页面,启动页面的作用能够打广告.发公告.做缓存处理.更新数据等等!Android实现开始页面的跳转,就是打开一个Android手机APP的欢迎界面后跳转到指定界面,下面就让我简单介绍下比较常用的开始页面的跳转方法吧. 一.在onCreate里设置个Timer,然后建立Intent指向你要调用的Activity.设置Timer 任意秒后执行startActivity即可!(Timer是一种定时器工具,用来在一个后台线程计划执行指定任务,它可以计划执行一个任务一次

  • 总结IOS界面间跳转的几种方法

    总结IOS界面间跳转的几种方法

    注意: 下面以FirstViewController(FVC)的按钮button点击后跳转到SecondViewController(SVC)为例说明: 方式一:Storyboard的segues方式 鼠标点击按钮button然后按住control键拖拽到SVC页面,在弹出的segue页面中选择跳转模式即可 优点:操作方便,无代码生成,在storyboard中展示逻辑清晰 缺点:页面较多时不方便查看,团队合作时可维护性差, 多人合作时不建议使用这种方式. 方式二:选项卡UITabBarContr

  • vue两个组件间值的传递或修改方式

    1.可以用公共的父组件来实现: 2.可以在store.js里面在设置公共变量: 3.也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改本地存储的值和获取修改后的值来实现: 4.就是父子组件间的值的传递与修改props,这里需要注意的是子组件里面不      能直接修改props里面接受的值,需要定义一个中间变量来接受props里的值并修改,通过$emit即this.$emit('checkDisplay',this.display

  • Vue实现兄弟组件间的联动效果

    需求说明 如图,我想要实现当点击字母L,页面定位到L开头的城市名 Do it 1.找到字母表的页面 在html标签绑定一个click事件,在js中定义一个方法,并使用参数e获取点击的字母.当在页面点击时,console出来 效果如下 2.通过city这个父页面,进行列表页和字母表页面的值传递 <1>在字母表页定义一个监听方法 <2>进入city页面,在html中绑定一个监听事件 在js中编写这个事件的方法 打开页面,可以看到没有问题,city页面监听到了字母表页面的点击 <3

  • Vue如何实现组件间通信

    Vue如何实现组件间通信

    1. 父子间通信 最常见的就是父子之间的通信,通信是双向的数据传递. 1.1 父组件 --> 儿子组件 父组件向儿子组件传递数据的方式就是 通过 Prop 向子组件传递数据. //child.vue <template> <div> 我是儿子,我收到来自父亲的数据为 {{value}} </div> </template> <script> export default { props:{ value: String } } //App.v

  • React组件间通信的三种方法（简单易用）

    React组件间通信的三种方法（简单易用）

    目录 一.父子组件通信 二.跨级组件通信 1.逐层传值 2.跨级传值 三.兄弟(无嵌套)组件通信 四.路由传值 五.Redux React知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,结合实例,通俗易懂,建议收藏. 一.父子组件通信 原理:父组件通过props(与vue中的props区分开)向子组件通信,子组件通过回调事件与父组件通信. 首先,先创建一个父组件Parent.js跟子组件Children.js,二者的关系为直接父子关系. Parent.js父组件如下,给父组

  • Vue父子模版传值及组件传值的三种方法

    这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档 vue2.0 http://vuefe.cn/guide/ vue-router2.0https://router.vuejs.org/zh-cn/essentials/getting-started.html 第一种 <div id="example"> <my-component></my-component> </div> <script src="..

随机推荐