账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    Vue-router 使用 addRoutes 没效果
    70
    0

    在 vue-router 中使用addRoutes 添加动态路由无效.

    import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/views/layout'

const _import = comp => require(`@/views/${comp}`).default

Vue.use(Router)

//全局静态路由
const constantRouters = [
  { path: '/login', name: 'login', component: _import('commons/login/login'), hidden: true },
  { path: '/error', name: 'error', component: _import('commons/errorPage'), hidden: true }
]

    //全局路由守卫
router.beforeEach((to, from, next) => {
  let token = getToken()
  //已登录
  if (token && token.length > 0) {
    //如果没有获取 用户信息
    if (store.getters.user.length < 1) {
    //这里没有使用 接口中的数据. 使用数据模拟.
      let mainRoutes = [{
        path: '/',
        component: Layout,
        name: 'layout',
        redirect: '/home',
        children: [
          { path: '/home', component: _import('modules/home'), name: 'home', meta: { title: '首页' } }
        ],
        // 主路由守卫
        beforeEnter (to, from, next) {
          let token = getToken()
          if (! token) {
            next({ path: '/login' })
          } else {
            next()
          }
        }
      }]
      router.addRoutes(mainRoutes)
      // next({ ...to, replace: true })
    }
    next()
  }  else {
    //否则直接进入 登录页
    next({ path: '/login' })
  }

})
    
const router = new Router({
  routes: constantRouters
})

export default router

    访问 http://localhost:8080/#/ 会跳转到 http://localhost:8080/#/login 页面也是正常显示.
    登录成功后 router.push('/') 到根路径 页面是一篇空白.

    确定路径这些都没有问题.组件都是正常加载到.我实在不知道我错在哪里...

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 終究是終局ジ 普通会员 1楼

      Vue Router 使用 addRoutes 会添加路由到你的路由中，但是它并不总是生效。以下是一些可能的原因：

      1. addRoutes 仅在 Vue Router v2.2.0 或更高版本中可用。
      2. addRoutes 要求 Vue Router v2.3.0 或更高版本。
      3. addRoutes 依赖于 router 模块，但是 router 部分已经被移除，因此可能无法使用。
      4. 如果你的路由配置不正确，那么 addRoutes 也不会生效。

      以下是一些解决方法：

      1. 检查你的路由配置，确保它们是在 Vue Router v2.2.0 或更高版本中可用的。你可以在 router/index.js 或 router.module.js 中添加配置。

      ```javascript import Vue from 'vue'; import Router from 'vue-router'; import Home from './views/Home.vue';

      Vue.use(Router);

      export default new Router({ routes: [ { path: '/home', name: 'Home', component: Home } ] }); ```

      1. 如果 addRoutes 依赖于 router 模块，那么你可能需要更新你的路由配置。你可以将 router 部分移除，然后添加新的路由。你可以在 router/index.js 或 router.module.js 中删除 router 部分，并添加新的路由。

      ```javascript import Vue from 'vue'; import Router from 'vue-router'; import Home from './views/Home.vue';

      Vue.use(Router);

      export default new Router({ routes: [ { path: '/home', name: 'Home', component: Home } ] }); ```

      1. 如果你的路由配置不正确，那么 addRoutes 也不会生效。你可以检查你的路由配置，确保它们是正确的。你可以在 router/index.js 或 router.module.js 中添加配置，并使用 created、beforeRouteEnter、beforeRouteLeave 等方法来添加或修改路由。

      ```javascript import Vue from 'vue'; import Router from 'vue-router'; import Home from './views/Home.vue';

      Vue.use(Router);

      export default new Router({ routes: [ { path: '/home', name: 'Home', component: Home } ] }); ```

      1. 如果以上方法都无法解决问题，那么你可能需要检查你的 Vue Router 安装。确保你已经安装了 Vue Router，并且它是全局的。你可以在命令行中运行 vue-router 来检查你的 Vue Router 是否已经安装。
    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部