精华内容
下载资源
问答
  • vue-routes 配置

    千次阅读 2018-08-15 16:11:57
    官方文档给的东西还是不够详细,这里给出自己开发中遇到的实例供大家参考。 首先当然是安装 这里只给出 npm 方式安装 npm install vue-router 如果在一个模块化工程中使用它...import Vue from 'vue' import V...

    官方文档给的东西还是不够详细,这里给出自己开发中遇到的实例供大家参考。

    首先当然是安装

    这里只给出 npm 方式安装

    npm install vue-router

    如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:

    1.找到文件的入口 js 文件,通常是 src 目录下的 main.js 

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)

    2.定义 (路由) 组件。

    可以从其他文件 import 进来

    import goods from './components/goods/goods';
    import ratings from './components/ratings/ratings';
    import seller from './components/seller/seller';

    3.定义路由

    每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器, 或者,只是一个组件配置对象。

    const routes = [
      {path: '/goods', component: goods},
      {path: '/ratings', component: ratings},
      {path: '/seller', component: seller}
    ];

    4.创建 router 实例,然后传 `routes` 配置

    const router = new VueRouter({
      linkActiveClass: 'active',
      routes: routes  //也可以直接简写成 routes
    });

    5.创建和挂载根实例。

    记得要通过 router 配置参数注入路由, 从而让整个应用都有路由功能

    /* eslint-disable no-new */
    new Vue({
      router,
      el: '#app',
      render: h => h(App)
    });

    上面第一句注释不能少,这是让 eslint 检测器忽略其语法检测

    最后如果你需要默认地址进入哪个路由可以加上最后一句

    router.push('/goods');

    这样一个简单的路由功能就配置好了!

     

    展开全文
  • 之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, vue动态添加路由,跳转...

    之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏,

    当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了,

    vue动态添加路由,跳转页面时,页面报错路由重复:

     

    于是处理一下

    原因addRoutes 方法仅仅是帮你注入新的路由,并没有帮你剔除原有的其它路由!

    我们先看一下原来代码

    路由拦截器中的代码:

    permission.js:

    router.beforeEach((to, from, next) => {
    
      NProgress.start()
      let token = getToken();
      let hasToken = token != 'undefined' && token != undefined && token !=null && token != '';
    
      if (hasToken) {
        // 1.有token
        if (to.path == loginRoute) {
          // 1.1 如果是去登录页,有token视为已登录,直接跳到首页
          next({ path: '/' })
          NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
        } else {
          // 1.2 如果不是去登录页,判断是否有访问权限
          if(store.getters.visitor){
            // 1.2.1 若该标记为true,是因为GetUserInfo返回结果发现用户信息中roles或perms为空数组,即未配置任何角色或权限,
            // 所以视为游客visitor给放行,放行后游客只能看到公共可以访问的菜单(即src/router/index.js中没有配置perm属性的路由)。
            next()
          }else if (!store.getters.perms || store.getters.perms.length === 0) {
            // 1.2.2 检查发现不是游客且未加载用户权限信息,应该调用接口加载用户权限信息
            // 用户刷新页面会导致vuex状态清空,或者用户首次登录,vuex中还没有权限信息。都要调用后台接口获得用户信息
            store.dispatch('GetUserInfo').then(res => {
              const perms = res.data.perms // note: roles must be a array! such as: [{name:'菜单1',val:'menu:1'}]
              store.dispatch('GenerateRoutes', { perms }).then(() => { // 根据roles权限生成可访问的路由表
                router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
                next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
              })
            }).catch((err) => {
              store.dispatch('FedLogOut').then(() => {
                Message.error(err || '获取用户信息失败,请重试')
                next({ path: '/' })
              })
            })
          } else {
            // 1.2.3 如果vuex种有权限信息,匹配权限信息,匹配ok则放行
            if (hasPermission(store.getters.perms, to.meta.perm)) {
              next()
            } else {
              next({ path: '/401', replace: true, query: { noGoBack: true }})
            }
          }
        }
      } else {
        // 2.没有token
        // 如果要访问的路由在白名单中,直接进入;否则,重定向到登录页面
        whiteList.has(to.path) ? next() : next(loginRoute);
        NProgress.done();
      }
    })

     

     

    上面 调用的addRoutes()方法是router自带的原生方法,是动态添加路由的,它并没有删除之前路由中原有的路由!!

    我们需要在动态添加路由时,清空一下之前的路由,就可以防止报这个错误

    我们需要添加一个自定义方法,来清空之前的路由,因为这个permission.js中用的router是从router.js中引用进来的,所以要在router.js中增加这个自定义方法:

    router.js中增加如下方法:

    Router.selfaddRoutes = function (params){
      Router.matcher = new Router().matcher;
      Router.addRoutes(params)
    }

    因为router.js最后导出的是router对象。所以我们只需要在这个router对象里加上这个方法即可

     

    展开全文
  • Vue Lazy Loading Routes

    千次阅读 2017-03-18 19:12:33
    Combining Vue’s async component feature and Webpack’s code splitting feature, it’s trivially easy to lazy-load route components. All we need to do is define our route components as async ...

    When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route’s components into a separate chunk, and only load them when the route is visited.

    Combining Vue’s async component feature and Webpack’s code splitting feature, it’s trivially easy to lazy-load route components.

    All we need to do is define our route components as async components:

    const Foo = resolve => {
      // require.ensure is Webpack's special syntax for a code-split point.
      require.ensure(['./Foo.vue'], () => {
        resolve(require('./Foo.vue'))
      })
    }

    There’s also an alternative code-split syntax using AMD style require, so this can be simplified to:

    const Foo = resolve => require(['./Foo.vue'], resolve)
    

    Grouping Components in the Same Chunk

    Sometimes we may want to group all the components nested under the same route into the same async chunk. To achieve that we need to use named chunks by providing a chunk name to require.ensure as the 3rd argument:

    const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
    const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
    const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

    the effect: if you render the component that you visited , this will have more .js files,but not included in vue app.js

    这里写图片描述

    as the photo show , there will have 2.js and 3.js , if not lazy load only have app.js

    这里写图片描述

    if you grouping your component in same chunk will the group chunk will have same .js file

    这里写图片描述

    展开全文
  • 在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由。直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-...
  • vue动态设置title

    千次阅读 2018-12-04 18:27:24
    1.安装vue-wechat-title 2.引用插件,在main.js中,首先import然后再use即可,具体代码如下: import Vue from 'vue' import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 3.在路由的...

    1.安装vue-wechat-title

    2.引用插件,在main.js中,首先import然后再use即可,具体代码如下:

    import Vue from 'vue'
    import VueWechatTitle from 'vue-wechat-title'
    Vue.use(VueWechatTitle)
    

    3.在路由的配置文件router.js里面配置我们想要的页面标题,meta:{title:'你想要设置的title名字'}代码示例如下:

    export default new Router({
        routes: [
            {path: '/', name: '/Index', component: Index,meta:{title:'围城少年'}},
            {path: '/Register', name: '/Register', component: Register,meta:{title:'登陆/注册'}},
        ]
    })
    

    4.最后一步,在页面加入v-wechat-title="$route.meta.title" 即可

    <template>
        <div class="root"  v-wechat-title="$route.meta.title">
        </div>
    </template>
    

    5.如果是vue3.0 则在App.vue 中添加以下代码<router-view v-wechat-title="route.meta.title" />

    在这里插入代码片
    
    <template>
          <router-view v-wechat-title="route.meta.title" />
    </template>
    <script lang="ts">
    import { useRoute } from "vue-router";
    export default {
      setup() {
        const route = useRoute();
        return {
          route,
        };
      },
    };
    </script>
    <style lang="less">
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #2c3e50;
    }
    </style>
    
    
    展开全文
  • vue动态修改title标题

    2019-08-22 15:25:45
    1)、首先安装 npm install vue-wechat-title --save 2)、接着在main.js中引入 import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 3、在路由文件index.js中给...routes: [{ path: '/', n...
  • vue动态路由匹配实例

    千次阅读 2017-11-21 10:15:37
    vue动态路由匹配实例
  • vue 动态路由实现

    千次阅读 2019-06-04 20:43:36
    vue开发中,第二个问题就是实现动态路由,根据后端权限配置获取对应的路由,最终生成对应的菜单。如下: 1、菜单接口返回结果的数据结构 [{ "url": "/system", "code": "sysmng", "name": "系统管理", "icon": ...
  • 利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 举个例子: ...
  • Vue动态路由:在一个页面获取上一个页面的传值 1:配置动态路由步骤: const routes = [ //(main.js文件中) { path: '/Content/:aid', component: Content }//动态路径参数以冒号开头 ] 在上一个页面中...
  • vue动态挂载路由

    千次阅读 2019-09-27 10:21:09
    后台管理系统中根据用户权限显示不同菜单是很基础的需求,使用vue开发通常我们是遍历路由(this.$router.options.routes)生成用户菜单,vue中提供了addRouter()方法用于动态挂载路由,我们可以根据用户权限结合该...
  • cd vue-localized-routes-example npm install run dev OR run watch-poll 与PHP服务器一起运行 php -S localhost:8000 文件 完整路由转换的代码有点麻烦,因为我没有找到任何更简单的方法来为不同的区域设置不同的...
  • router.addRoutes(routes); router是VueRouter对象的实例。参数routes是一个数组,数组元素是合法的路由配置对象。开发中可通过router.addRoutes()实现权限管理。 let newRoutes = []; let about = { //接口...
  • vue动态加载路由

    千次阅读 2018-12-21 14:02:02
    但是发现组件引入并不成功,发现有2点,第一是不能直接对当前routes进行插入,需要使用addRoutes函数来操作路由数组,第二是组件动态加载不能使用import, 需要用require.ensure(). 修改后: 现在可以正确访问到...
  • vue动态菜单最全代码

    千次阅读 2020-08-31 11:42:02
    vue动态菜单最简单写法 这段时间公司用vue+elementUI做了个后台管理系统,管理系统都会有角色菜单权限管理,所以研究了一下动态菜单的加载,遇到了很多坑和大家分享一下。 element-admin的登录逻辑 1、先看登录方法...
  • vue开发:vue动态路由匹配

    千次阅读 2018-01-15 09:33:44
    /user/foo  /user/bar     const User = { ... template: `User {{ $route.params.id }}` ...const router = new VueRouter({  routes: [  { path: '/user/:id', component: User }  ]
  • Vue动态配置路由权限

    2020-07-07 15:12:45
    import Vue from 'vue' import Vuex from 'vuex' import permission from './modules/permission' Vue.use(Vuex) const store = new Vuex....动态获取后台参数并渲染 import { constantRoutes } from '@/router' i
  • VUE动态权限菜单

    千次阅读 2019-07-11 16:21:40
    第一种 后台返回的是多维数组,即菜单格式以及排好 // main.js Vue.prototype.routerLoad = { // 遍历添加路由 bianli(arr) { return arr.map(v => { // 子菜单判断 if (v.subs) { // this...
  • vue 动态修改页面标题title

    千次阅读 2019-05-15 10:31:17
    vue 动态修改页面标题title 1.安装 npm install vue-wechat-title --save 或 npm install vue-wechat-title -S 2.使用 在main.js中引用插件 import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle...
  • vue动态路由配置

    千次阅读 2017-12-15 10:35:45
    最近写的一个项目,需要配置一个动态的路由,就是路径调到一个页面上去,而且后面的参数是可传可不传的。废话不多说看代码…… 在index.js文件下export default new Router({ routes: [ { //根路由 path: '/', ...
  • vue动态改变title

    千次阅读 2019-05-20 15:10:30
    一般写title会在index.html里的head标签title... 可以根据路由写title 首先要安装 cnpm install vue-wechat-title --save export default new Router({ routes: [ { path: '/', name: 'Home', component:...
  • vue 动态插入子路由

    千次阅读 2019-06-04 10:00:41
    动态路由 动态注册路由(动态在new router中注册路由) ...let comment = [{path: '../../view/index/index.vue'}]; this.$router.options.routes[1].push({ path: '/' + __menu.name, name: __menu.name, name: __m...
  • await store.dispatch(types.PULL_ROUTES, data) router.addRoutes(store.state.common.routes)
  • vue-router的routes中name属性作用详解

    万次阅读 多人点赞 2018-11-21 14:15:23
    我们常用vue.js和vue-router来创建单页应用,vue-router能很方便的管理所有的单页组件。我们在定义每个路由的时候会有一个name的属性(如下面代码),通常我们不定义这个属性发现也没有任何问题,那么这个name到底有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,162
精华内容 17,264
关键字:

vue动态routes

vue 订阅