VUE项目实现页面跳转
打开一个VUE项目,目录结构是这样的:
如现在有两个页面aaa和HelloWorld,路由配置在index.js中: import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import aaa from '@/components/aaa' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/aaa',
name: 'aaa',
component: aaa
}
]
}) 现在在HelloWorld中点击按钮跳转到aaa,在aaa中点击按钮也可以返回到HelloWorld: 1、HelloWorld: <div class="hello">
<h1>{{ msg }}</h1>
<button @click="go">点我跳转</button>
</div> <script>
export default {
name: 'HelloWorld',
data () {
return {
msg: '哈哈'
}
},
methods:{
go(){
this.$router.push('/aaa')
}
}
}
</script> 2、aaa: <template>
<div>我是aaa
<button @click="back">点我返回</button>
</div> </template> <script>
export default {
name: 'aaa',
/*data () {
return {
msg: '哈哈'
}
},*/
methods:{
back(){
this.$router.push('/')
}
}
}
</script>
VUE项目实现页面跳转的更多相关文章
- 前端Vue项目——登录页面实现
一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP ...
- vue项目刷新页面,使数据不丢失(sessionStorage、localStorage、cookie)
vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.
- 【笔记】vue实现简单项目和页面跳转
此项目适合不会前端,不会vue的人. 不会vue真正的开发,这里用vue和vant-ui简单搭一个商城app的tabbar和页面跳转. 装vue-cli3.0 根据官网快速上手搭建vant项目,官网 ...
- (day68)Vue-CLI项目、页面跳转和传参、生命周期钩子
目录 一.Vue-CLI (一)环境搭建 (二)项目的创建 (三)项目目录结构 (四)Vue组件(.vue文件) (五)全局脚本文件main.js(项目入口) (六)Vue请求生命周期 二.页面跳转和 ...
- angularjs项目的页面跳转如何实现
链接:https://www.zhihu.com/question/33565135/answer/696515Angular页面传参有多种办法,根据不同用例,我举5种最常见的:PS: 在实际项目中, ...
- vue项目各页面间的传值
githut地址:https://github.com/liguoyong/vueobj1 一.父子之间主键传值:(主要是在父主件里的子主件传递参数,然后再子主件里用props接收) 例如Father ...
- Vue路由实现页面跳转的两种方式(router-link和JS)
Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用 1.通过 <router-link> 实现 <router-link> 组件用于设置一 ...
- react项目中页面跳转、刷新及获取网络状态
// 页面跳转 window.location.href = 'http://speedtest.wangxiaotong.com/' // 页面刷新 window.location.reload() ...
- Vue Router实现页面跳转拦截
场景: 某些页面需要登录之后才可以访问,在页面跳转前做处理,如果要访问的页面A需要登录,则强制调到登录页,并且记录要访问的页面A的链接,在登录成功后自动跳转到页面A 1.在router下的index. ...
随机推荐
- close yield
close的方法主要是关闭子生成器,需要注意的有4点: 1.如果生成器close后,还继续next,会报错StopIteration [图片] 2.如果我捕获了异常,将GeneratorE ...
- OL6.3 设置本地yum源
仅在 Oracle Linux Server release 6.3 上测试 PS:Oracle Linux Server release 6.3仅用于测试,不能用于商业用途 [root@oracle ...
- mysql 虚拟列导入报错1906说明
当表中有虚拟列,使用mysqldump导出后,执行source导入的时候,会出现下列错误: 对于mariadb 10.2,该错误忽略即可,不影响导入.对于mysql 5.7,截止5.7.9该错误没有解 ...
- Python爬虫(一)——豆瓣下图书信息
爬虫目的: 随着近年互联网的发展,网络上的信息飞速数量增长.在庞大的数据面前想要获得期望的信息往往如同大海捞针.通过合理的筛选,在百万甚至数亿计的数据中找到所需信息,无疑有着非常大的意义. 在豆瓣网下 ...
- python简说(十五)MD5加密
def my_md5(s): news = str(s).encode() m = hashlib.md5(news) return m.hexdigest()
- 自动化测试系列:Selenium UI自动化解决iframe定位问题
更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6735116.html 一个阴雨霏霏 ...
- Flutter基础用法解析
解析开始 Flutter中一切皆widget,一切皆组件.学习Flutter中,必须首先了解Flutter的widget.先从最基本的MaterialApp和Scaffold开始了解 1 Materi ...
- php编程疑难解决-1
全局变量和超全局变量 如果是php脚本script 或php代码, 一定要放在 php标签内<?php ?> 内. 这样apache才会把他当做php脚本内容来解析, 才会去调用php模块 ...
- bzoj1497 [NOI2006]最大获利 最大权闭合子图
链接 https://www.lydsy.com/JudgeOnline/problem.php?id=1497 思路 最大权闭合子图的裸题 一开始知道是这个最大权闭合子图(虽然我不知道名字),但是我 ...
- MySQL 5.7的原生JSON数据类型使用
新增测试用表: CREATE TABLE lnmp ( `id` ) unsigned NOT NULL AUTO_INCREMENT, `category` JSON, `tags` JSON, P ...