首页 > 其他分享 >第八篇 - Vue路由跳转步骤

第八篇 - Vue路由跳转步骤

时间:2023-07-05 14:11:27浏览次数:36  
标签:Vue jump1test 第八篇 HelloWorld vue 跳转 import

第六篇讲了将SpringBoot和Vue项目结合起来,实现了使用Vue访问SpringBoot的API。这一篇我们介绍当访问API成功后跳转到新的Vue页面怎么处理。

参考链接:https://zhuanlan.zhihu.com/p/468467076

第一步:首先新建一个Vue页面

 jump1test.vue

/* eslint-disable */
<template>
  <div>
    <h1>我是一个jump1</h1>
  </div>
</template>
<script>
export default {
  name: 'jump1test'
}
</script>
<style scoped>

</style>

 

第二步:在index.js配置Vue路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import jump1test from '../components/jump1test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/jump1test',
      name: 'jump1test',
      component: jump1test
    }
  ]
})

 

第三步:在Login访问API成功后调用新页面

      Login () {
      this.$axios
        .get('http://localhost:8081/api/login', {
          params: {
            username: this.loginForm.username,
            password: this.loginForm.password
          }
        })
        .then(successResponse => {
          console.log(successResponse.data)
          this.$router.push('/jump1test')
        })
        .catch(failResponse => {})
    }

 

然后运行demo1项目和vuetest项目,通过vue项目进入登陆页面,点击登陆按钮,就会跳转到jump1test页面

 

成功。

标签:Vue,jump1test,第八篇,HelloWorld,vue,跳转,import
From: https://www.cnblogs.com/smart-zihan/p/17528362.html

相关文章

  • 08:vue3 组件基础
    定义一个组件在components文件夹下新建MyComponent.vue组件 写入下面代码1<script>2exportdefault{3data(){4return{5count:06}7}8}9</script>1011<template>12<button@click="count++">我被点击了{......
  • 解决vue中mapbox地图显示一半的问题
    解决vue中mapbox地图显示一半的问题问题描述:在vue中创建mapbox地图,地图只显示一般,查看浏览器开发者工具。发现将canvas.mapboxgl-canvas的position:absolute去掉就解决了。代码修改:获取到canvas.mapboxgl-canvas,并修改其position样式就ok修改前代码:<template><main......
  • vue项目动态菜单import运行报错【转】
    Modulebuildfailed(from./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):TypeError:Cannotreadproperty‘range’ofnull 1.从git拉取的项目,下载依赖后就报Modulebuildfailed(from./node_modules/@vue/cli-plugin-eslint/node_modu......
  • vue项目报错:Node.js v18.16.1 error Command failed with exit code 1.
    原因:把node升级到了最新的长期支持版18.16.1,结果运行vue项目启动失败,报错如下:试了各种办法都解决不了,后面只能把node降级到16.20.1运行项目又可以启动了......
  • vue渲染原理简单实现
    实现功能:1.渲染系统:·功能一:h函数,用于创建并返回一个VNode(虚拟对象);·功能二:mount函数,用于将VNode挂载到节点上;·功能三:patch函数,用于对比两个VNode,决定该如何处理新的VNode;1.新建一个index.html的页面其中有一个id为app的div元素,之后我们写的所有DOM都会挂载到此元素......
  • Vue项目引入Bootstrap5步骤
    1、在工程项目下安装Bootstrap5依赖包[email protected]或者[email protected]、安装安装jqueryBootstrap有js函数,必须新引入jquerynpminstalljquery--save3、在vue.config.js配置jQuery插件的参数module.exports=......
  • Vue, Django | 数据可视化平台开发
    给公司搞了个互联网设备可视化平台,在地图上展示互联网设备的信息,点击地图不同区域,统计相应的设备信息,生成图表展示出来用的vue-big-screen框架,在原框架基础上,主要干了下面几件事:1.下载不同区域的geojson数据,点击大图的不同区域,调用mapclick方法,将子区域的geojson数据加载出来2......
  • 前端Vue自定义轮播图视频播放组件 仿京东商品详情轮播图视频Video播放效果 可图片预览
    前端Vue自定义轮播图视频播放组件仿京东商品详情轮播图视频Video播放,可图片预览,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13325效果图如下:cc-videoSwiper使用方法<!--goodsData:轮播图视频数据 @setShowVideo:视频按钮点击事件-......
  • 前端Vue一款基于canvas的精美商品海报生成组件 根据个性化数据生成商品海报图 长按
    前端Vue一款基于canvas的精美商品海报生成组件根据个性化数据生成商品海报图长按保存图片,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13326效果图如下:cc-beautyPoster使用方法<!--posterData:海报数据--><cc-beautyPoster:poste......
  • vue2-样式冲突-使用deep修改子组件中的样式
    /deep/样式穿透<template><divclass="left-container"><h3>Left组件</h3><my-count:init="9"></my-count></div></template><script>exportdefault{}</scrip......