精华内容
下载资源
问答
  • 缺点:页面会闪一下影响用户体验,特别是在菜单页面动态添加页面的情况下 2. 使用路由的matcher 附代码 export const constantRouterMap = [ { path: '/login', component: () => import('@/views/login/index...

    1 使用window.location.reload()

    缺点:页面会闪一下影响用户体验,特别是在菜单页面动态添加页面的情况下
    

    2. 使用路由的matcher

    附代码
    
    export const constantRouterMap = [
      {
        path: '/login',
        component: () => import('@/views/login/index'),
        hidden: true
      },
    
      {
        path: '/',
        component: Layout,
        hidden: false,
        meta: { title: '首页', icon: 'home', requiresArg: false }
      },
      {
        path: '/403',
        component: () => import('@/views/403'),
        hidden: true
      },
      {
        path: '/test',
        component: () => import('@/views/login/test'),
        hidden: true
      }
    ]
    
    export const createRouter = () => new VueRouter({
      // mode: 'history',
      scrollBehavior: () => ({
        y: 0
      }),
      routes: constantRouterMap
    })
    
    const router = createRouter()
    
    export function resetRouter () {
      const newRouter = createRouter()
      router.matcher = newRouter.matcher // the relevant part
    }
    

    3.参考地址

    github.

    展开全文
  • vue-router添加路由

    2020-04-22 16:54:04
    现在给工程添加一些路由,即在 routes 中添加一些路径和组件的映射: // 1. 将要用到的组件从其他文件 import 进来 import Foo from './views/Foo.vue'; import Bar from './views/Bar.vue'; import User ...

    路由是路径和组件间的映射,而路径所对应的组件将在 <router-view> 标签处渲染。

    现在给工程添加一些路由,即在 routes 中添加一些路径和组件的映射:

    // 1. 将要用到的组件从其他文件 import 进来
    import Foo from './views/Foo.vue';
    import Bar from './views/Bar.vue';
    import User from './views/User.vue';
    
    // 2. 定义路由,每个路由应该映射一个组件
    // 添加路径即在 routes 数组中增加新的成员
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar },
      // 新增一项
      { path: '/user', component: User }
    ];
    
    // 3. 创建 Router 实例,然后传 `routes` 配置
    const router = new VueRouter({
      routes
    });
    

    导入组件的写法

    导入组件不但可以像上面那样用 import 的方法导入,还可以像下面这样直接在 routes 中写:

    const routes = [
      { path: '/foo', component: () => import('./views/Foo.vue') },
      { path: '/bar', component: () => import('./views/Bar.vue') },
      { path: '/user', component: () => import('./views/User.vue') }
    ];
    

    命名路由

    有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。我们可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称:

    // 0. 导入 Album、List、Add、Empty 三个组件
    
    // 1. 定义路由
    const routes = [
      { path: '/foo',
        name: 'fooName',
        component: () => import('./views/Foo.vue')
      }
    ];
    

    通过命名跳转:

    <!-- to 的值是一个对象而不是字符串,所以要在 to 前加 : -->
    <router-link :to="{name: 'fooName'}">Go to Foo</router-link>
    
    展开全文
  • 直接使用route.addRouter只能添加到最外层 如果我想动态添加路由到某个路由的children里面要怎么实现?
  • vue-router addRouter 实现 动态路由

    千次阅读 2019-07-24 17:31:28
    vue-router 中有一个 api ...addRouter 是 router 实例的一个方法, 可以动态添加更多的路由规则 这个 api ,可以让你的 router 配置,不用在初始化router实例的时候就写进去 可以在 vue 实例化 以后,动态的添加...

    vue-router  中有一个 api ,名曰 addRouter

    router.addRoutes(routes: Array<RouteConfig>)

    addRouter 是 router 实例的一个方法, 可以 动态添加更多的路由规则

    这个 api ,可以让你的 router 配置,不用在初始化router实例的时候就写进去

    可以在 vue 实例化 以后,动态的添加更多的路由

    用途:

    你的 router 可以从后台 获取,动态的添加到 router实例中去,

    router.options.routes.push(...pages)

    router.addRoutes(pages)

     

    展开全文
  • 新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由、子路由在添加子路由的时候比如原现有路由const routes = [{path: '/',name: 'Login',component: () => import(/* ...

    aff9f72ce5e96a0c1bdf543372de9ae7.png

    新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由、子路由

    在添加子路由的时候

    比如原现有路由

    const routes = [

    {

    path: '/',

    name: 'Login',

    component: () => import(/* webpackChunkName: "about" */ '@/views/Login.vue')

    },

    {

    path: '/index',

    name: 'index',

    meta: { title: '首页', noCache: true },

    component: () => import(/* webpackChunkName: "about" */ '@/views/index.vue'),

    children:[]

    // children: [{

    // path: '/test',

    // name: 'test',

    // component: () => import('../views/test.vue')

    // }

    // ]

    }

    ]

    想要在index下动态添加子路由test,特别要注意添加的子路由的path一定要把父路由的路径也带上

    const routeObj = {

    path: 'index/test', // 这里要把父路由的路径也带上

    name: 'test',

    meta: { title: '测试路由test', noCache: true },

    component: () =>

    import('../test/test.vue'),

    }

    this.$router.addRoute('index', routeObj)

    展开全文
  • router动态添加路由

    千次阅读 2019-05-20 14:32:01
    当你进入系统,肯定先进入登陆页面,这时候路由其实已经创建好了,当你登陆的时候,肯定进入的是404页面,但是在router中可以动态的添加路由 在main.js中添加如下代码 router.afterEach((to, form) => { let ...
  • 原因: 是因为刷新之后history中的数据没有保存,需要在devServer中设置historyApiFallback: true.
  • 获取路由参数,将路由添加路由集合中去 // 获取 路由信息 axios.post("/api/mock/getMenu") .then((resp) => { let datas = resp.data; // 遍历获取到的路由数组将其添加到全局路由中 datas.forEach(v =&...
  • router.beforeEach ((to, from, next) => { if (to.path == "/login" ){ next(); } else { let token = getCookie( 'token' ); if (token){ next(); } else { next( '/login' ); } } }) 当时...
  • 1.在添加路由之后,使用vuex将router存起来 2.使用beforeEach判断页面是否刷新,若是刷新,将vuex中的router.matcher赋值给当前router.matcher router.beforeEach((to, from, next) => { iView.LoadingBar....
  • 文章目录添加动态路由问题一:路由守卫死循环问题二:addRouters()不生效最终版,所有相关文件 添加动态路由 router/index.js 在router.js里定义asyncRoutes作为动态路由数组, import Vue from 'vue' import ...
  • Linux下route add 命令添加路由列表

    万次阅读 2016-03-07 16:42:51
    route add命令的主要作用是添加静态路由,通常的格式是: route ADD 157.0.0.0 MASK 255.0.0.0 157.55.80.1 METRIC 3 IF 2 参数含义:destination mask gateway metric interface /* 可以缩写 */ ...
  • 昨天为了调试这个问题搞了很久,开发的后台菜单是遍历router.options,之前注册静态路由的时候router.options,之前注册静态路由的时候router.options,之前注册静态路由的时候router.options里面都是有值的,但是...
  • 在当前项目中使用的iview-admin,路由要根据权限动态生成,是在登录后获取当前用户权限内的路由使用 vue-router 的 addRoutes() 方法动态添加到路由表中 遇到的问题 项目目录 ... router index.js // 路由主...
  • routes: constantRoutes //constantRoutes为默认路由 }); const router = createRouter(); export function resetRouter() { //这个是重置函数 const newRouter = createRouter(); router.matcher =
  • router.addroute在添加路由时,已有的路由规则表中如果含有path相同的路由时,则不会添加进路由规则表中,并且如果当前路由能匹配到path值name却不同时,会自动跳转当前路由到匹配的路由。 起因是这样的。最近由于...
  • vue-router——路由配置及动态路由

    千次阅读 2019-08-13 12:12:39
    vue-router是vue全家桶之一,对于构建单页面应用非常简单。 引入方式 路由配置 动态路由 动态路由参数获取 两种使用方式: CDN引入:直接使用 <script src='...
  • Iron.query与会话完全一样,但是它们的值存储在路由中,并且取决于路由 Iron.query.set(键,值) 添加或更改路径中键的值 Iron.query.get(键) 获取当前路径中键的值,如果不发送key ,则返回带有所有查询键的...
  • addRouter页面跳转空白问题

    千次阅读 2019-10-25 11:34:55
    vue router 采坑儿记,希望能帮助到...* vue router 动态路由实现 使用 router.addRouter() 方法 * 1. 因为本项目不存在登录流程,所以网站初始没有任何路由,也不能在登陆成功后再 addRouter * 2. 解决思路:只能在...
  • 主要介绍了使用VueRouter的addRoutes方法实现动态添加用户的权限路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 在做菜单权限的时候,使用了 router.addRoutes() 方法把不同权限获取到的路由表动态的添加路由里面去。菜单正常展示,在点击菜单跳转之后,浏览器刷新一下,页面没有跳转到 404 页面,而是变成了空白。 问题原因:...
  • 比如在登陆页面:login.vue import { routeMore } from './../router' method:{ async login () { // 登陆成功就添加路由,其实权限也可通过addRoute()来实现 const res = await this.$api.login() if(res....
  • router-link to="/product/add">商品添加</router-link> <router-link to="/product/del">商品删除</router-link> <router-view></router-view> </div> </template...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,565
精华内容 9,026
关键字:

addrouter添加路由