搭建VUE项目（三）VUE项目实现页面跳转

我就是我 2022-05-21 01:07 254阅读 0赞

打开一个VUE项目，目录结构是这样的：

![70][]

如现在有两个页面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>

[70]: /images/20220521/9eefbcbe39cc4762b7dea968abd5aea4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，254人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 项目搭建

安装 Node.js 安装：推荐阅读：[Windows安装 Node.js][Windows_ Node.js] 检测：打开目标文件夹（本文示例：C:\\Use

╰半夏微凉°/ 2023年10月18日 22:56/ 0 赞/ 146 阅读

相关【vue项目】中跳转页面

一、跳转外链页面替换当前页（重新定位当前页）：window.location.href EX：window.location.href = “http链接” 打卡

短命女/ 2023年10月12日 11:49/ 0 赞/ 43 阅读

相关 vue项目实现页面跳转携带参数

this.$router.push({ path: "/Shengc", //页面路径 name: "S

╰+攻爆jí腚メ/ 2022年11月15日 11:21/ 0 赞/ 275 阅读

相关 Vue实现页面跳转

![70][]![70 1][] 如何点击底部书架跳转到对应的页面 <router-link :to="{name: 'bookshelf', params: {

àì夳堔傛蜴生んèń/ 2022年05月22日 06:12/ 0 赞/ 376 阅读

相关搭建VUE项目（三）在VUE项目中使用ajax

方式是使用axios（进入项目根目录下，执行安装命令：npminstall\--saveaxios），（存在问题：会覆盖之前安装的UI，导致项目报错，可以先安装axios，再安

清疚/ 2022年05月21日 02:43/ 0 赞/ 483 阅读

相关搭建VUE项目（三）VUE项目实现页面跳转

打开一个VUE项目，目录结构是这样的： ![70][] 如现在有两个页面aaa和HelloWorld，路由配置在index.js中： import Vue fro

我就是我/ 2022年05月21日 01:07/ 0 赞/ 255 阅读

相关搭建vue项目

> 1，安装好node.js npm > 2，创建vue项目： > > npm install -g vue-cli /搭建脚手架/ >

待我称王封你为后i/ 2022年05月10日 09:12/ 0 赞/ 355 阅读

相关 Vue 页面跳转

1.单页面跳转 1.1 无参数-- this.$router.push(path: ' 路由 ') 传递参数 -- this.$router.pus

Bertha 。/ 2022年03月26日 05:05/ 0 赞/ 334 阅读

相关 vue 页面跳转

1.使用 `<router-link>` 创建 a 标签 <router-link to="/city"> <div>跳转</div> </

你的名字/ 2021年12月12日 13:57/ 0 赞/ 413 阅读

相关 Vue项目搭建

一：安装node.js 安装教程：http://www.runoob.com/nodejs/nodejs-install-setup.html 安装完成之后，在cmd命令

逃离我推掉我的手/ 2021年07月24日 21:00/ 0 赞/ 612 阅读