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 相关文章推荐
js+css在交互上的应用
Jul 18 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 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
第二节 对象模型 [2]
2006/10/09 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
实例解析Array和String方法
2016/12/14 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
python通过floor函数舍弃小数位的方法
2015/03/17 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
Python使用Pygame绘制时钟
2020/11/29 Python
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
职工运动会邀请函
2014/02/02 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
食品安全宣传标语
2014/06/07 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL