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

2024-09-29 19:37:56

通过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>

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

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

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

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

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

模板抽离我们已经学习过了Vue模板的另外定义形式,使用<template></template>.  <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路
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来实现组件间跳转的三种方法

通过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数据的三种方法

目录方法一:(不友好,页面会白屏,不推荐使用) 方法二 : (不会出现白屏,推荐使用) 方法三 : 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界面间跳转的几种方法

注意: 下面以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如何实现组件间通信

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

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

相关推荐

随机推荐