vue-router | 易学教程

Vue router keep iframe dom element (just hide, don't destroy)

阅读更多关于 Vue router keep iframe dom element (just hide, don't destroy)

问题 I'm developing a Vue 2.5 SPA using vue-router 3.0. Some views contain subcomponents that render iframes. When I switch to another route and return to a route that renders an iframe, the respective iframe is reloaded , even if it was visited before. This behavior is unwanted because it results in a bad UX in that case. The iframe state shall remain the same as before, when the user returns to the view. I guess the reloading is caused by the dom being destroyed when leaving the route. Even the

select one object from one json file by id vue

阅读更多关于 select one object from one json file by id vue

问题 Sorry I'm new to vue but I have to create SPA application so I started playing with the code and I've been using external API and axios to match dynamic routes in my .vue components for json data like this: data () { return { post: null, nextPost: null, prevPost: null, total: 0, endpoint: 'https://jsonplaceholder.typicode.com/posts/' } }, methods: { totalPosts (posts) { this.total = posts }, getPost (id) { console.log('currentid' + id) axios(this.endpoint + id) .then(response => { this.post =

Vue-Router: view returning to login page after page refresh

阅读更多关于 Vue-Router: view returning to login page after page refresh

问题 i'm building a app with Vuejs and using vue-router and vuex. i'm stuck now because, after the user login, my app redirect to dashboard, but if i refresh the page, he returns to login page again. to verify if user is logged, my app check the localstorage if have a access_token then he is redirected to router view "/" or not. this is my router folder and his files: src/router index.js: import Vue from 'vue' import VueRouter from 'vue-router' import {routes} from './routes' import beforeEach

vue2.0中关于active-class

阅读更多关于 vue2.0中关于active-class

一、首先， active-class是什么， active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；相关可查阅文档： https://router.vuejs.org/zh-cn/api/router-link.html 二、在vue-router中要使用active-class有两种方法：方法一：直接在路由js文件中配置linkActiveClass export default new Router({ linkActiveClass: 'active', }) 方法二：在router-link中写入active-class <router-link to="/home" class="menu-home" active-class="active">首页</router-link> 三、最近在项目中出现一个问题，使用第二种方法添加active-class，跳转到my页面后，两个router-link始终都会有选中样式，代码如下 <div class="menu-btn"> <router-link to="/" class="menu-home" active-class="active"> 首页 </router-link> </div> <div class="menu-btn"> <router

How to load external html file in a template in VueJs

阅读更多关于 How to load external html file in a template in VueJs

问题 I'm new to vue js. I'm just creating a simple project where I just include vuejs through CDN. not using node/npm or cli. I keep all my html markup in single html which looks messy as it grows. I tried to split html to views and want to include it by something analogous to ng-include of angularJs I have worked in angular previously where there is ng-include to load external html files. I'm looking for something similar to that in vue. the whole point is to split my html files into more

Refresing a vue app gives: Cannot GET /path

阅读更多关于 Refresing a vue app gives: Cannot GET /path

问题 I have a simple webpack template vue app, and let's say I have a page with http://localhost:8080/profile On my local page, I can go from any page to /profile and even once on /profile I can refresh/reload the page and I get no error. But I deployed my app on heroku and even though I can navigate from any page to any other, but if I am for example on /profile page and I hit refresh i get Cannot GET /statement what could be the problem? 回答1: You trying to use history mode of router without

Vue2 navigate to external url with location.href

阅读更多关于 Vue2 navigate to external url with location.href

问题 I tried to go to 'www.mytargeturl.org' using router.go, router.push, router.replace and window.location.href to redirect my vuejs app but i always get myVueapp.com/www.mytargeturl.org Here's my route: routes:[ {path: '/', component: App, children:[ { path: 'detail', component: ItemDetail, props: true }, { path: 'search', component: Middle } ] }, { path: '/test', component: Test }, { path: '/a', redirect: 'www.mytargeturl.org' } // also tried this but didnt work ] 回答1: Agreed with people in

How to auth windows AD users by node.js?

阅读更多关于 How to auth windows AD users by node.js?

问题 I need to auth windows AD users recently. The scenario is below Web pages runs at Server A ( Vue + vue-router ) Api interface runs at Server B ( node + express ) User input AD username & pwd on Web pages (Server A) pass the username & pwd to the api interface on Server B to auth Server B auth username & pwd via LDAP(windwos AD) api on Server B returns the feedback to Web pages (Server A) So, is there any solution could be implemented on Server B to auth username & pwd via LDAP? Great thx! 回答1

Vue 路由配置

阅读更多关于 Vue 路由配置

注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。推荐使用npm安装。一、使用路由在main.js中，需要明确安装路由功能： 1.定义组件，这里使用从其他文件import进来 3.创建 router 实例，然后传 routes 配置 4.创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能经过上面的配置之后呢，路由匹配到的组件将会渲染到App.vue里的<router-view></router-view> 那么这个App.vue里应该这样写： index.html里呢要这样写：这样就会把渲染出来的页面挂载到这个id为app的div里了。二、重定向 redirect 三、嵌套路由通过/index/info就可以访问到info组件了四、懒加载通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。五、<router-link> 在vue-router 1中，使用的是在vue-router 2中，使用了<router-link></router-link>替换1版本中的a标签六、路由信息对象 1.$route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo

vue router pass object as props

阅读更多关于 vue router pass object as props

问题 I have the following fiddle https://jsfiddle.net/91vLms06/1/ const CreateComponent = Vue.component('create', { props: ['user', 'otherProp'], template: '<div>User data: {{user}}; other prop: {{otherProp}}</div>' }); const ListComponent = Vue.component('List', { template: '<div>Listing</div>' }); const app = new Vue({ el: '#app', router: new VueRouter(), created: function () { const self = this; // ajax request returning the user const userData = {'name': 'username'} self.$router.addRoutes([ {