VUE项目实现页面跳转
2023-09-11 14:17:57 时间
打开一个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项目引入bootstrap、elementUI、echarts
- h5项目(特别是vue)缓存严重的解决方案,配合nginx
- vue开发 - 将方法绑定到window对象,给app端调用
- vue项目如何实现返回上一页
- vue+element列表排序
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- [Vue @Component] Switch Between Vue Components with Dynamic Components
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- amCharts 4.8 Crack JS VUE 图表
- 仓库管理系统-前后端分离项目(SpringBoot+Vue)
- vue-cli打包之后的项目在nginx的部署
- Vue中vue-i18n结合vant-ui实现国际化
- 开始创建一个 Vue 项目
- Vue(八)vue 脚手架、脚手架创建项目示例
- vue快速学习02、基础用法
- vue-element-admin整合.net core web api项目开发点滴记录
- 如何运行 GitHub 上下载的 Vue 项目