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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
innerText和innerHTML 一些问题分析
May 18 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 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 高手之路(三)
2006/10/09 PHP
php中的时间显示
2007/01/18 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
php经典趣味算法实例代码
2020/01/21 PHP
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
python获取mp3文件信息的方法
2015/06/15 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python判断完全平方数的方法
2018/11/13 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
详解Django中异步任务之django-celery
2020/11/05 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
大学毕业感言100字
2014/02/03 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
学前班评语大全
2014/05/04 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
思想品德评语大全
2014/12/31 职场文书
python中tkinter复选框使用操作
2021/11/11 Python