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


Posted in Javascript onNovember 07, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 Javascript
vue 运用mock数据的示例代码
Nov 07 #Javascript
vue环境搭建简单教程
Nov 07 #Javascript
用Webpack构建Vue项目的实践
Nov 07 #Javascript
vue双花括号的使用方法 附练习题
Nov 07 #Javascript
vue组件生命周期详解
Nov 07 #Javascript
Angular2的管道Pipe的使用方法
Nov 07 #Javascript
浅谈react 同构之样式直出
Nov 07 #Javascript
You might like
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
js验证模型自我实现的具体方法
2013/06/21 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
python实现求特征选择的信息增益
2018/12/18 Python
python实现日志按天分割
2019/07/22 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
MySQL七大JOIN的具体使用
2022/02/28 MySQL