vue-router

问题 I have a VueJS app with the following configs: 1) config.index.js build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '', /** * Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all

问题 I'm having this setup where I have child component props that have datetime format inside it and I want to change it to more human readable format in my table, so i use moment js to change the format and to do those kinds of task it will be made more sense if I use computed property. Like this in my index.vue <div class="page-container"> <div class="page-content"> <div class="content-wrapper"> <data-viewer :source="source" :thead="thead"> <template scope="props"> <tr> <td>{{props.item.name}}<

问题 I use vue-router 2.5.3 and have two pages: first for long list (loaded via ajax) and second for details. When I scroll down on list page and next navigate using clicking back the browser button the browser always scrolls to the top. The value of savedPosition is for the first time undefined and for next attempts Object {x: 0, y: 0} <div class="main-content"> <router-view ></router-view> </div> scrollBehavior(to, from, savedPosition) { console.info(savedPosition) // first attemp undefined and

问题 I'm building a web app with VueJs and need a css framework to design something not from scratch! I found material-design-lite (www.getmdl.io) but i couldn't make it work properly with vue-router. My first page is correctly displayed but when i try to move to another page, i have this error : vue.esm.js?65d7:467 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. I thought it was because of the "Use MDL on

问题 I'd like to show some loading animation in the app root while a component prepares to be rendered by vue router. Already found this question, proposing the use of navigation guards, and another question, where the accepted answer shows how to use the beforeEach guard to set a variable in app , showing a loading animation. The problem is that this doesn't work when deep-linking to some route (initial url includes a route path, such as 'someurl#/foo'). The beforeEach guard simply doesn't get

问题 How can I apply Vue.js scoped styles to components loaded via <view-router> . Here is my code: <template> <div id="admin"> <router-view></router-view> </div> </template> <style lang="scss" scoped> #admin { .actions { display: none; span { cursor: pointer; } } } </style> When I visit the /posts a component named Posts will be loaded, inside this component I have a <div class="actions"> some content </div> The problem is that the style defined in #admin is not applied to .action element. When

问题 I have a menu using Router-link, and i want to put class "Active" on "li" when the Router-link was actived. <ul class="nav nav-second-level"> <li v-for="item in menu"> <router-link :to="{ name: somewhere }" tag="a" exact-active-class="IS-ACTIVATED"> {{Name}} </router-link> </li> </ul> Is there a way to set a class to parent using "exact-active-class"? Thanks! 回答1: You can use v-if to check which route you're in and add class if $route.name is somewhere <ul class="nav nav-second-level"> <li v

问题 I'm relatively new to Vuejs and I’ve been stuck on with the following error for a while now: (Appears when page loads) Uncaught TypeError: Cannot redefine property: $router at Function.defineProperty () at Function.install (VM2179 vue-router.esm.js:526) at Function.Vue.use (vue.js:4738) at eval (VM2179 vue-router.esm.js:2447) at Object../node_modules/vue-router/dist/vue-router.esm.js (VM2105 app.js:1615) at __webpack_require__ (VM2105 app.js:712) at fn (VM2105 app.js:95) at eval (VM2178 index

问题 I followed this article to deploy the app to heroku. It works at a minimal level. The app utilizes vue-router. The common thing about single app application is that routing doesn't work if we don't to home page first to bootstrap the framework. Since I am using Express.js to create a server for the app, which doesn't have a backend, I created a wildcard route to server the index.html to all routes. So if a user entered /some-route, express.js servers the index.html which will bootstrap the

问题 I've build a vue.js web app for an insurance brokerage where every agent has their own website that is generated from their profiles. This is what the link looks like in my vue-router index file" { path: '/agents/:id', name: 'AgentSite', component: AgentSite }, Everything works great EXCEPT that the urls are getting too long to fit on some business cards. I would like to change the URLs to be like this: { path: '/:id', name: 'AgentSite', component: AgentSite }, However, then every other bit