Vue集成vue-router实现页面跳转出现的问题

柔情只为你懂 2022-03-29 02:20 264阅读 0赞

1、配置router文件夹下index.js，配置方式一

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    const routes = [
      {
        path: '/',    // 首页
        name: 'home',
        component: resolve => {
          require(['@/views/frontpages/Index'], resolve)
        }
      },
      {
        path: '/login',    // 登录页
        name: 'Login',
        component: resolve => {
          require(['@/views/background/Login'], resolve)
        }
      }
    ]
    const router = new Router({
      routes
    })
    export default router

配置方式二、

routes.js

// 路由配置
    export default[
      {
        path: '/',
        name: 'home',
        component: resolve => {
          require(['@/views/frontpages/Index'], resolve)
        }
      },
      {
        path: '/login',
        name: 'Login',
        component: resolve => {
          require(['@/views/background/Login'], resolve)
        }
      }
    ]

index.js

import Vue from 'vue'
    import Router from 'vue-router'
    import routes from '@/router/routes'
    
    Vue.use(Router)
    
    // 路由配置
    const RouterConfig = {
      // mode: 'history',
      routes
    }
    
    const router = new Router(RouterConfig)
    export default router

2、写好页面之后访问启动后显示的路径，页面将会跳转到配置的path: "/"路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70][]

点击按钮触发页面跳转，首页跳转方式,由首页跳转到登录页

<Button type="primary" @click="go">去登录页</Button>
    <script>
        methods: {
          go () {
            this.$router.push('/login')
          }
        }
    </script>

如果直接通过访问路径访问（localhost:8080/login） 访问将失败，在这里进坑了，在坑里待了很久

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70]: /images/20220329/0aa34a64025a46938b90b2e75a6013ba.png