【Springboot+Vue】页面路由跳转/2022/3/1-CFANZ编程社区

【Springboot+Vue】页面路由跳转/2022/3/1

起因
as we knows,前后端分离是可以发送数据回去，但是跳转页面怎么操作，我们就来解析一下

思路
其实这样是成立的，比如我们在前端用axios发送一个/user/insert到后台接收处理完返回一个结果不管是redirct还是forward还是插入成功，前台这边获取了参数是可以利用this.$router路由去跳转的

拓展
可以通过 $router 访问路由实例

import Vue from 'vue'
import Router from 'vue-router'



import Test from '../views/Test.vue'
import Login from '../views/Login.vue'
import Home from '../views/Home'
import Kill from '../views/Kill'
import LoginSuccess from '../views/LoginSuccess'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/kill',
      name: 'kill',
      component: Kill
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/test',
      name: 'Test',
      component: Test
    },

  ]
})

我们可以通过this.$router获取还可以利用两个方法

// 字符串
      this.$router.push('home')
// 对象
      this.$router.push({ path: 'home' })
// 命名的路由
      this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=123
      this.$router.push({ path: 'register', query: { plan: '123' }})

push方法其实和是等同的。

// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退

//push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录
<router-link to="/05" replace>05</router-link>

// 一般使用replace来做404页面
this.$router.replace('/')

解决方案

0 条评论