vue-router

Do we have router.reload in vue-router?

帅比萌擦擦* 提交于 2019-11-29 22:51:22
I see in this pull request : Add a router.reload() Reload with current path and call data hook again But when I try issuing the following command from a Vue component: this.$router.reload() I get this error: Uncaught TypeError: this.$router.reload is not a function I searched in the docs , but could not found anything relevant. Does vue/vue-router provider some functionality like this? The software versions I'm interested in are: "vue": "^2.1.0", "vue-router": "^2.0.3", PS. I know location.reload() is one of the alternatives, but I'm looking for a native Vue option. this.$router.go() does

vue-router, nginx and direct link

耗尽温柔 提交于 2019-11-29 22:27:57
问题 I'm trying to setup a vue-router on my nginx server. The issue I'm having is that my route doesn't work if I enter url directly to the browser myapp.com/mypath . I've tried server configuration as described in the vue router docs as well as suggested similar configurations on stack overflow. My current nginx location configuration as follows: location / { try_files $uri $uri/ /index.html; } location /subscribe { proxy_pass http://127.0.0.1/subscribe // express API app } All that does is

How to display a “loading” animation while a lazy-loaded route component is being loaded?

倾然丶 夕夏残阳落幕 提交于 2019-11-29 21:48:45
I have split my app into multiple chunks with webpack's code splitting feature so that the entire application bundle isn't downloaded when the user visits my webpage. The chunks that some routes require can be reasonably large and may take a noticeable amount of time to download. This is fine, except the user is not aware that the page is actually loading when they click an internal link, so I need to somehow display a loading animation or something. My router is configured like this: [ { path: '/', component: () => import(/* webpackChunkName: 'landing' */ './landing.vue'), }, { path: '/foo',

小白第二课:环境搭建 VUE Node.js VSCode template模板

拟墨画扇 提交于 2019-11-29 16:25:39
环境搭建 VUE Node.js VSCode template模板: 首先安装node: http://www.runoob.com/nodejs/nodejs-install-setup.html 进入命令行模式: win+r ---->cmd cd f:\ md vuetest cd vuetest 安装webpack:npm install webpack -g 安装vue脚手架:npm install vue-cli -g 创建项目:vue init webpack proj Use ESLint to lint your code:这个是代码警告提示这个很烦人的建议最好不要 项目目录: 安装项目依赖:npm install 安装 vue 路由模块vue-router和网络请求模块vue-resource:cnpm install vue-router vue-resource --save 安装elementui:npm install element-ui --save 安装vue的gridster:npm install vue-power-drag 安装echarts:npm install echarts -S 安装axios惊醒HTTP请求: npm install axios VSCode下: ctrl_s 保存文件的同时开始编译,

How to create dynamic tag based on props with Vue 2

老子叫甜甜 提交于 2019-11-29 16:21:41
问题 How can I make a component similar to vue-router router-link where I get the tag via props to render my template ? <my-component tag="ul"> </my-component> Would render: <ul> anything inside my-component </ul> 回答1: You can use a built-in component element like so: <component is="ul" class="foo" style="color:red"> anything inside component </component> See: https://vuejs.org/v2/guide/components.html#Dynamic-Components 回答2: EDIT: Please check @krukid answer, it is a better solution, I didn't

Fully dynamic vue-router

。_饼干妹妹 提交于 2019-11-29 15:41:16
We are building an enormous website based on Vue and Nuxt with over 25 different page types that cannot be matched with standard /:id or /overview/:slug logic that comes out of the box with Vue Router. As slug-matching isn't an option, we are thinking about the following solution: User visits page "/this-is-a-topic-page" Server calls API that returns the pageType topicPage topicPage relates to the nuxt page WpTopicPage We set WpTopicPage as our component within our wildcard instance of Vue Router This looks like the following in code: export function createRouter() { return new Router({ mode:

vue-router中$route 和 $router

对着背影说爱祢 提交于 2019-11-29 10:10:39
1.1 $route 表示(当前路由信息对象) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录)。 路由信息对象:即$router会被注入每个组件中,可以利用它进行一些信息的获取。 1 1.$route.path** 2 字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。 3 2.$route.params** 4 一个 key/value 对象,包含了 动态片段 和 全匹配片段, 5 如果没有路由参数,就是一个空对象。 6 3.$route.query** 7 一个 key/value 对象,表示 URL 查询参数。 8 例如,对于路径 /foo?user=1,则有 $route.query.user == 1, 9 如果没有查询参数,则是个空对象。 10 4.$route.hash** 11 当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。锚点 12 5.$route.fullPath** 13 完成解析后的 URL,包含查询参数和 hash 的完整路径。 14 6.$route.matched** 15 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 16 7.$route.name 当前路径名字** 17 8.$route

悟空CRM - 开源悟空客户关系管理(CRM)

我是研究僧i 提交于 2019-11-29 09:03:19
悟空软件长期为企业提供企业管理软件(CRM/HRM/OA/ERP等)的研发、实施、营销、咨询、培训、服务于一体的信息化服务。悟空软件以高科技为起点,以技术为核心、以完善的售后服务为后盾,秉承稳固与发展、求实与创新的精神,已为国内外上千家企业提供服务。 悟空CRM是一款永久开源免费的CRM管理系统,悟空CRM是基于JAVA/PHP多语言的B/S架构的管理软件,为企业提供行业专属的crm客户管理方案。 悟空的发展受益于开源,也会回馈于开源。2019年,悟空CRM会继续秉承“拥抱开放、合作共赢、创造价值”的理念,在开源的道路上继续砥砺前行,和更多的社区开发者一起为国内外开源做出积极贡献。 悟空CRM采用全新的前后端分离模式 官网: http://www.5kcrm.com 官网: http://www.72crm.com 论坛: http://bbs.72crm.net 演示地址: demo9.5kcrm.net (演示账号:18888888888 密码:123456) 主要技术栈【PHP版本】 后端框架:ThinkPHP 5.0.2 前端MVVM框架:Vue.JS 2.5.x 路由:Vue-Router 3.x 数据交互:Axios UI框架:Element-UI 2.6.3 悟空crm9.0的运行环境要求PHP5.6以上 下载地址: https://gitee.com

Vue使用日记(24):vue-router详解(5)——嵌套路由

ぐ巨炮叔叔 提交于 2019-11-29 08:54:17
嵌套路由 嵌套路由是一个很常见的功能,比如在home 页面中, 我们希望通过 /home/news 和 /home/message 访问一些内容,一个路径映射一个组件,访问这两个路径也会分别渲染两个组件。也就是在大页面home下面嵌套/home/news 和 /home/message这两个路由,组件切换是在home这个大页面进行。 实现步骤演示: 1、首先定义两个子组件,用于进行嵌套: 2、然后配置嵌套路由映射关系,这里是在home这个大页里面嵌套,嵌套的时候使用children关键字: 3、然后使用这两个嵌套路由,注意是在home组件里面使用,因为是在home里的嵌套: 注意: 这里需要注意to属性里的路径,需要写完整的这种路径“ /home/message ”,如果不这样写,<router-view>标签将无法识别渲染对应的路由,因为别忘了App.vue组件里也有使用<router-view>标签,写完整路径才能让该标签识别是App组件的还是home组件的嵌套路由。 4、如果需要配置默认路径,即一进来就显示的路径,则和非嵌套路由的配置方式一样,使用redirect: 来源: CSDN 作者: jimson_zhu 链接: https://blog.csdn.net/jimson_zhu/article/details/102717010

Vue使用日记(25):vue-router详解(6)——传递参数

江枫思渺然 提交于 2019-11-29 08:54:01
路由传参 1、传递参数 传递参数主要有两种类型: params 和 query 。 params 的类型: 配置路由格式: /router/:id 传递的方式: 在 path 后面跟上对应的值 传递后形成的路径: /router/123,/router/abc query 的类型: 配置路由格式: /router, 也就是普通配置 传递的方式: 对象中使用 query 的 key 作为传递方式 传递后形成的路径: /router?id=123,/router?id=abc 如何使用它们呢? 也有两种方式: <router-link> 的方式和 JavaScript 代码方式。 举例如下 params类型的方式在动态路由一篇博客里其实已经说过。 <router-link> 的方式: 说明: 以前动态路由的params类型方式其实也可以写成对象的key形式,指定path。 JavaScript 代码方式 query类型的传递参数,在路由切换时浏览器的url展示如下: 2、获取参数 获取参数通过$route 对象获取的。 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新。 通过$route 获取传递的信息如下: 3、$route和$router的区别 $route和 $router 是有区别的