通过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>
通过vue-router实现组件间的跳转的更多相关文章
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总
目录 路由重定向 仓库介绍 vuex插件:可以完成任意组件间信息交互(移动端) 前端存储数据大汇总 前后台交互方式(重点) 前后台数据交互 axios插件:完成前后台ajax交互的 同源策略 - 前后 ...
- vue程序中组件间的传值方式
vue程序在组件中进行传值有多种方式,这里记录我在项目中使用到的三种: 1. 父组件向子组件传值 2. 子组件向父组件传值 3. 通过路由传参 父组件通过props向子组件传值 在子组件script中 ...
- vue-router实现组件间的跳转---参数传递
四.通过VueRouter来实现组件之间的跳转:参数的传递 login ---用户名--->main ①明确发送方和接收方②配置接收方的路由地址 {path:'/myTest',componen ...
- vue的父子组件间的相互传参props及props数据的多种验证机制
感觉自己即将完全步入前端大军,后台老板都不需要我弄了,塞翁失马...时间会告诉我们是好是坏 好了言归正传,最近vue是搞的不亦乐乎啊,下面来总结一下vue组件间的各种使用方法以及一些技巧 ------ ...
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法 父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...
- vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...
- vue之父子组件间通信实例讲解(props、$ref、$emit)
组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
随机推荐
- Flume 实时获取日志内容插入MySQL
https://www.jianshu.com/p/22e6133649ca 采用链接的方法试了一下,好像不成功,问题出在 channel.take(); //获取出来的Event为空,不知道为啥
- vue和cordova项目整合打包，并实现vue调用android的相机的demo
经过网上查找很多资料,发现很多只有vue+cordova的项目整合,但是vue使用cordova插件的文章很少,现在把从创建cordova和创建vue到vue使用插件到项目打包到android手机运行 ...
- Iconfont 阿里图库使用(小程序和H5)
前言 现在前端发展的太快,前端优化也是,图片也是被近2年来比较火的就是阿里图库取代了,不管小程序还是H5 都在用 好了,那么就介绍下如何使用吧 阿里图库 当然需要你到阿里官网 http://www.i ...
- 搭建 MySQL 5.7.19 主从复制，以及复制实现细节分析
主从复制可以使MySQL数据库主服务器的主数据库,复制到一个或多个MySQL从服务器从数据库,默认情况下,复制异步; 根据配置,可以复制数据库中的所有数据库,选定的数据库或甚至选定的表. Mysql ...
- Codeforces Round #568 (Div. 2) A.Ropewalkers
链接: https://codeforces.com/contest/1185/problem/A 题意: Polycarp decided to relax on his weekend and v ...
- 【NOIP2016提高A组模拟9.17】数格子
题目 分析 设表示每一行的状态,用一个4位的二进制来表示,当前这一行中的每一个位数对下一位有没有影响. 设\(f_{i,s}\)表示,做完了的i行,其状态为s,的方案数. 两个状态之间是否可以转移就留 ...
- shiro框架学习-7- Shiro权限控制注解和编程方式
讲解权限角色控制 @RequiresRoles, @RequiresPermissions等注解的使用和编程式控制 配置文件的方式 使用ShiroConfig 注解方式 @RequiresRoles( ...
- Mysql包的下载
官方下载地址: https://dev.mysql.com/downloads/mysql/5.5.html#downloads mysql的下载界面 二进制的包 通用的RPM包 源码包
- html applet标签 语法
html applet标签 语法 作用:定义嵌入的 applet. 说明:某些浏览器中依然存在对 <applet> 但是需要额外的插件和安装过程才能起作用.大理石机械构件 注释:HTML5 ...
- ant design Radio.Group defaultValue 默认选中没生效
版本问题 (3.10.7 版本中使用 defaultValue) <div> <Radio.Group defaultValue="a" buttonStyle= ...