vue自动路由-单页面项目（非build时构建）

这是一个什么项目？

答：这是一个单页面的vue.js项目，主要为了实现在非build时，进行自动路由。简单点说，就是在请求页面时，根据url进行动态添加路由。

自动路由有什么限制吗？

答：有，因为是通过url进行动态添加，所以，在指定文件夹下，组件文件的相对路径必须与url有一定的关系。当前demo项目，url路径与modules文件夹下的组件相对路径一致。例如：

url地址：localhost:5000/home/index

组件路径：modules/home/index/index.vue

此方式的自动路由能做些什么？

答：

1.动态权限控制：在匹配不上路由时，请求后台获取是否有权限，根据后台的反馈处理是否添加路由（是否允许访问）。

2.自动跳转首页、404页面等页面

项目demo地址

vue.js单项目自动路由：https://github.com/bobowire/wireboy.samples/tree/master/vue.js/onepage

具体步骤

1.组件生成

在router文件夹下添加import.js文件，代码如下图：

源码：

module.exports = file => () => import('@/modules/' + file + '.vue')

2.拦截路由

在src目录下，添加autoroute.js文件，代码如下图：

源码：

import router from './router'
const _import = require('./router/import')// 获取组件的方法
router.beforeEach(async (to, from, next) => {
 // 默认的首页页面
 if (to.fullPath === '/') {
 next('/home/index')
 } else if (to.matched.length === 0) {
 // 获取组件路径
 let componentpath = to.fullPath.substring(1) + '/' + to.fullPath.substring(to.fullPath.lastIndexOf('/') + 1)
 // 添加路由
 router.addRoutes([{
 path: to.fullPath,
 name: to.fullPath.substring(to.fullPath.lastIndexOf('/') + 1),
 component: _import(componentpath)
 }])
 // 路由重匹配
 next({ ...to, replace: true })
 } else {
 next()
 }
})

总结

以上所述是小编给大家介绍的vue自动路由-单页面项目（非build时构建），希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • Vue 路由切换时页面内容没有重新加载的解决方法

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t

  • 基于vue-router 多级路由redirect 重定向的问题

    在做多级路由的时候遇到很多问题,虽然不难,但是如果没有经验,往往要花一整天时间才能解决(可能我笨),况且网上资料也很少. 项目需要是这样的: 登录页面跳到后台页面重定向,登录页是一级路由 对应页面 登录后: 同时重定向二级和三级页面, 这样登录就会重定向了,此时url 但又有一个问题:当再次点击底部"堂食"的时候, url变成这样,并且三级页面没有出来 解决办法是:在这个"堂食"按键 添加一个方法 记住,也只有这样传参才有效 如果在<router-link&g

  • 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部. 最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了.最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳

  • vue3.0 CLI - 3.2 路由的初级使用教程

    我的 github 地址 -vue3.0Study- 阶段学习成果都会建立分支. ========================== 动态路由 在路由某部分里加入[ : ],就成为动态路由如:/user/:id/,那么路由导航,并不是  /user/id/ 而是 /user/666/. 显然这个 id 能被获取,在组件中使用.通过 this.$route.params 获取. this 是当前组件,$route 是路由对象,params 是一个对象字面量 { id:666 }. $route

  • 解决vue-router在同一个路由下切换,取不到变化的路由参数问题

    最近用vue写项目的时候碰到一个问题,在同一个页面下跳转,路由地址不变,路由参数有变化,一开始只是在data里取路由的参数,发现根本取不到变化的路由参数. 在网上查找了一番后发现可以这样写: watch: { '$route' (to, from) { //这样就可以获取到变化的参数了,然后执行参数变化后相应的逻辑就行了 console.log(this.$route.query) } } 以上这篇解决vue-router在同一个路由下切换,取不到变化的路由参数问题就是小编分享给大家的全部内容了

  • vue自动路由-单页面项目（非build时构建）

    这是一个什么项目? 答:这是一个单页面的vue.js项目,主要为了实现在非build时,进行自动路由.简单点说,就是在请求页面时,根据url进行动态添加路由. 自动路由有什么限制吗? 答:有,因为是通过url进行动态添加,所以,在指定文件夹下,组件文件的相对路径必须与url有一定的关系.当前demo项目,url路径与modules文件夹下的组件相对路径一致.例如: url地址:localhost:5000/home/index 组件路径:modules/home/index/index.vue

  • vue、react等单页面项目部署到服务器的方法及vue和react的区别

    vue、react等单页面项目部署到服务器的方法及vue和react的区别

    最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...用react做的项目也同样遇到类似问题.现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.so

  • 多页vue应用的单页面打包方法(内含打包模式的应用)

    一.简介 关于如何以及为什么要构建多页vue应用,我们在上一篇文章中已经介绍过,感兴趣的请参考构建多页vue应用.本文我们要介绍的是,对于一个多页应用,如何单独打包其中一个(或几个)页面. 一般来说,多页应用不需要打包单个页面,这多个页面可以作为整个应用直接放在静态资源服务器上.不过我们也说过,多页应用的每个页面也可能会放在不同的服务器上,这时候如果往每个服务器上都放置完整的资源包,就会显得过于臃肿.于是我们可能就需要将某个页面单独打包出来. 诚然,有一个很明显的方法,就是在每次打包的时候直接删

  • vue实现的多页面项目如何优化打包的步骤详解

    遇到的问题 在多页面框架打包的过程中会,随着业务的增加页面越来越多,使用的三方包也会越来越多,但并不是所有页面都会使用到三方插件,使用webpack打包会让所有的三方包打包到一起,会导致vendor.js(三方包打包后的文件)越来越大,即使没使用过三方插件的页面也会引入,页面加载会越来越慢. 如何优化 使用cdn引入,这种就每次新建一个页面的时候手动通过cdn的方式引入,但是并不是特别好的方式,还需要手动加入. 就是使用splitChunks分割三方包,将三方包单独打包出来,根据页面的依赖情况自

  • vue cli2.0单页面title修改方法

    一.npm install vue-wechat-title --save  执行命令 二.在main.js中添加 Vue.use(VueWechatTitle); Vue.config.productionTip= false 三.在router/index.js文件中添加 routes: [{ path: '/',redirect: 'Home' },{ path: '/Home',name: 'Home',component: Home, meta:{ title:'银行开户' }},],

  • vue、react等单页面项目应该这样子部署到服务器

    vue、react等单页面项目应该这样子部署到服务器

    最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.sosout.com ,根路由就是 '/'.

  • vue中SPA单页面应用程序详解

    一.SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容器中. SPA的工作原理: eg:  http://127.0.0.1/index.html#/start ①根据地址栏中url解析完整的页面:index.html 加载index.html ②根据地址栏中url解析#后的路由地址: start 根据路由地址,去在当前应用的配置中 找该路由地址的配置

  • vue实现todolist单页面应用

    vue实现todolist单页面应用

    刚学习vue的小伙伴不知道从哪入手,很多网上的教程一来就搭建脚手架环境,可以新手更本看不懂,建议还是用引入script的方式引入vue.js,然后看官网的教程,再拿那这个demo练练手,也可以看看官网的demo,然后再去熟悉安装,搭建单页面应用. 效果: 功能: 在input输入文字点击按钮或者enter,下面会添加一个带复选框和文字还有删除按钮的li 用到的vue函数: data,methods,watch,还有localstorage 页面非常简单: 先写外面的盒子,这里用到v-model双

  • vue通过路由实现页面刷新的方法

    vue 开发微信商城项目, 需求如下: 购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转(非物理返回)无法触发beforeDestroy方法,则无法再此方法中销毁bus方法 beforeDestroy() { this.$root.Bus.$off('judge') this.$root.Bus.$off('refreshDetail') this.$root.Bus.$off('cle

  • 详解webpack + vue + node 打造单页面(入门篇)

    详解webpack + vue + node 打造单页面(入门篇)

    1.node下载地址:http://nodejs.cn/download/,安装完成检查node和npm版本 2.淘宝镜像 : npm install cnpm -g --registry=https://registry.npm.taobao.org ,淘宝镜像比npm要快很多,可以直接用cnpm代替npm 3.安装vue-cli:cnpm install -g vue-cli 安装webpack:cnpm install -g webpack -g 表示全局安装 编程过程中需要引入模块的话可

随机推荐