vue项目中,如何实现对一个页面进行操作后跳转到另一个页面,怎么配置路由?

vue项目中,如何实现对一个页面进行操作后跳转到另一个页面,怎么配置路由?

img

代码

img

路由配置对了,然后就可以用 编程式导航,具体怎么用,需要根据你的vue-router来看 。route版本不一样会有差异。
this.$router.push('/home'); 不过都是 xx.push 基本都是这样。你打印一下你的路由对象就知道了

routerjs里配置这两个页面的路由,触发事件的时候router.push

你可以这样写的

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      meta: { title: '首页', noCache: true },
      component: () => import('@/views/Home.vue'),
      hidden: true
    },
  ]
})


但是得正确注入程序

import Vue from 'vue'
import ElementUI from 'element-ui'

import '@/assets/styles/index.scss'

import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
import VueClipboard from 'vue-clipboard2'
// 自定义指令
import Directives from './components/js/directives';
import '@/permission'
Vue.use(Directives);
Vue.use(ElementUI)
Vue.use(VueClipboard)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})


没看到你的路由配置文件

  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7683025
  • 这篇博客你也可以参考下:vue项目用户免登录逻辑(一个项目跳转另一个项目指定页面,无需输入账号密码登陆)
  • 除此之外, 这篇博客: vue项目中打包完成后如何外部链接打开项目中的某个路由页面?中的 vue项目开发打包完后 如何从外部链接跳转到项目中的某个路由页面? 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 因为vue是单页面应用,所以项目打包完后只有一个index.html文件,然后一切跳转都是有内置的路由来实现,但是当我们从外部链接跳转的时候,好比这样,好比这样要直接从外部跳转到paintList这个路由页面,可是这时候会报错404,提示找不到页面,因为你打包完后就只有index.html文件,并没有paintList.html这个文件,所以会报错,这时候就需要打包前来配置一下。
    **第一种:**整个项目是history模式的,这种的话就需要后端来配合,具体操作也不会,只知道是要在ngix里配置什么东西。这里你可以参考一下“https://www.jianshu.com/p/5714ec0b9102”,这里主要说第二种方法,hash模式的
    第二种”:项目是使用hash模式,这种的话就只要前端来配置就好了,是给全局添加一个hashchange事件,来判断获取跳转的路由。代码如下:是写在app.vue里面

      mounted() {
        window.addEventListener('hashchange', (e) => {
          var currentPath = window.location.hash.slice(1); // 获取输入的路由
          if (this.$router.path !== currentPath) {
            this.$router.push(currentPath); // 动态跳转
          }
        }, false);
      }
    
    

    这样就可以从外部链接直接跳转进来的,但是如果有参数的话,就需要和后端商量看是把参数拼接在后面还是自己保存在本地从本地获取,好了,就是这样了

  • 您还可以看一下 徐照兴老师的Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇课程中的 什么是单页面应用及实现前端路由的基本原理小节, 巩固相关知识点