通过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代码 < ...
随机推荐
- 脚本_通过进程与端口判断myslq服务
#!bin/bashif [[ $port -eq 1 || $porcess -eq 2 ]];then #通过条件判断端口和进程执行的返回值. echo "mysql is s ...
- Zen Cart 138 在PHP5.3环境下出现的Fatal error: Cannot redeclare date_diff()
Zen Cart 138 在PHP5.3环境下出现的Fatal error: Cannot redeclare date_diff() in includes/functions/functions_ ...
- 跨站请求伪造CSRF：攻击与防御
CSRF是什么 (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一,也被称为&quo ...
- HTML自定义radio单选按钮(纯css版,样式可以随意改变)
html: <div> <input id="item1" type="radio" name="item" value= ...
- electron打包成.exe后限制只启动一个应用
注意:这是2.x的文档 const {app} = require('electron') let myWindow = null const shouldQuit = app.makeSingleI ...
- AJAX - 服务器 响应
AJAX - 服务器 响应 服务器响应 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性.大理石构件来图加工 属性 描 ...
- luoguP1774 最接近神的人_NOI导刊2010提高（02）x
P1774 最接近神的人_NOI导刊2010提高(02) 题目描述 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某种活动的图案.而石门 ...
- POJ 3260 The Fewest Coins（完全背包+多重背包=混合背包）
题目代号:POJ 3260 题目链接:http://poj.org/problem?id=3260 The Fewest Coins Time Limit: 2000MS Memory Limit: ...
- 好题Islands
Orz yjc 吊打候选队 不好的思路是枚举森林的m块,这样DP显然会涉及n当做某一维,最多只能卷积优化一下 生成函数什么的n太大不用想 考虑m,k比较小,能不能把n变成一个系数,而不是维度 所以就是 ...
- vscode中让html中php代码高亮
找到设置中的文件设置中的files.associations,增加以下内容(注意一下内容要放在右侧的用户设置中,而不是放在中间的默认设置中): { // Configure file associat ...