vue-router | 易学教程

Vue-router does not catch routes with a dot in the webpack template

阅读更多关于 Vue-router does not catch routes with a dot in the webpack template

问题 I bootstrapped my application from webpack template and added the route /edit/:filename to it. The problem is, filenames containing a dot are handled by Express and not by my Vue application. In other words, /edit/123 is matched by the route but /edit/123.json or /edit/123.txt is not and I get a 404 from Express. How can I match anything or at least /edit/anyfilename.json in my route? 回答1: I had an answer from Linus Borg on Vue forum. Vue webpack template uses connect-history-api-fallback to

Vue Router Child, Trailing slash

阅读更多关于 Vue Router Child, Trailing slash

问题 Is is it normal behavior for Vue to add a trailing slash to the default child subroute? For example: URL Result: /#/user/test/ Link <router-link :to="{ name: 'user', params: { username: 'test' } }">Test User Overview</router-link> Routes routes: [ { path: '/user/:username', component: User, children: [ { path: '', name: 'user', component: UserOverview }, { path: 'stats', name: 'user.stats', component: UserStats } ] } ] I would expect the user link to have the path specified by its parent,

Laravel Vue js spa application

阅读更多关于 Laravel Vue js spa application

问题 1). i want to know why people use two servers to make a vuejs SPA with laravel. I think we can use the other way. Make a Route like this Route::get('{any}', function () { return view('index'); })->where('any' , ".*"); and let vue handle the page url.. why people are using 2 servers and then using laravel passport to authenticate when we dont need to do all this to make spa.. 2). Okay now suppose we have our spa readdy using 2 separate servers one for vue and one for laravel . Now i don't know

Simulate v-if directive in custom directive

阅读更多关于 Simulate v-if directive in custom directive

问题 I need to destroy element in custom directive like v-if. (Forbid item creation if the condition fails.) I trying this export const moduleDirective: DirectiveOptions | DirectiveFunction = (el, binding, vnode) => { const moduleStatus = store.getters[`permissions/${binding.value}Enabled`]; if (!moduleStatus) { const comment = document.createComment(' '); Object.defineProperty(comment, 'setAttribute', { value: () => undefined, }); vnode.elm = comment; vnode.text = ' '; vnode.isComment = true;

Keep alive view-router by key param

阅读更多关于 Keep alive view-router by key param

问题 How do I keep vue-router alive with different params separately? TL:DR : Let's consider an example when we're developing a website like facebook. Each user has a profile page. Because there are a lot of users we don't want to iterate all users and load all profile page on load like bellow <template v-for="profile in profilePages"> <profile-page :data="profile" v-show="this.route.params['id'] === channel.id"/> </template> The common approach would be: router.js : { component: ProfileWrapper,

Is there a way to route to html files with Vue router?

阅读更多关于 Is there a way to route to html files with Vue router?

问题 Hello I am using VueJS and the webpack template. I have a bunch of components I can easily display with Vue Router. However, my organization uses Robot Framework for testing and we generate an HTML page using the command: python -m robot.testdoc /tests/directory /destination.html This is basically how I am using the router: import Vue from 'vue' import Router from 'vue-router' import Main from '@/components/Main.vue' import Component1 from '@/components/Component1.vue' import Component2 from

vue-router使用

阅读更多关于 vue-router使用

首先抛出这样一个问题，vue-router是用来做什么的？这里不着急回答，也不准备在这篇文章里回答。这篇文章仅总结一些使用心得，其实总结完所有关于vue-router的内容后，整篇文章也许就刚好能回答这个问题了。一使用步骤单纯使用Vue.js，我们可以通过组合组件来组成应用，不同的页面有不同的地址，路由依靠链接跳转。这显然不是单页应用，因为会有页面刷新。当要把vue-router引入进来，我们需要做的是，将组件映射到路由，然后告诉路由在哪里渲染组件内容。 1. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vue-router</title> </head> <body> <div id="app"> <h1>Hello World!</h1> <p>  <router-link to="user">toUser</router-link>  <router-view></router-view> </p> </div> <script src="/dist/build.js"></script> </body> </html> 2. JavaScript

VueJs - Passing query in query string as prop

阅读更多关于 VueJs - Passing query in query string as prop

问题 I'm having an issue getting the URL query string from within a component. I am trying to implement this https://router.vuejs.org/guide/essentials/passing-props.html#function-mode so I can pass the query as a prop. I haven't used query strings much, and I tend to use params, but I need the query string in this case. The problem I am having is mounted() doesn't seem to have access to the query. Below is a basic sample of what I can't get working: URL = http://localhost:8080/?q=This%20is%20my

Vue test-utils how to test a router.push()

阅读更多关于 Vue test-utils how to test a router.push()

问题 In my component , I have a method which will execute a router.push() import router from "@/router"; // ... export default { // ... methods: { closeAlert: function() { if (this.msgTypeContactForm == "success") { router.push("/home"); } else { return; } }, // .... } } I want to test it... I wrote the following specs.. it("should ... go to home page", async () => { // given const $route = { name: "home" }, options = { ... mocks: { $route } }; wrapper = mount(ContactForm, options); const closeBtn

vue-router how to persist navbar?

阅读更多关于 vue-router how to persist navbar?

问题 I'm learning Vue coming from React, and wondering what the correct way to persist a navbar is - i have navigation on there with router links. I have a navbar component with router-links which works, but it is reloading when heading to another route. Is there a way to persist it "outside" of the body components? Such as it isn't re-rendered when heading to a new route? I tried putting it outside the router-view, but it does not render anywhere: <template> <div id="app"> <topnavbar> </topnavbar