vue-router

问题 Is there a way to render components that come from an ajax response? For example, I registered a component "Test" and in the ajax response I have: <p>dummy paragraph</p> <test></test> <!-- vue component I want to render --> <p>another dummy paragraph</p> My final goal is to make a shortcode that lets the user insert a router link in the content area. I'm using Vue 2, vue router Edit: here is a demo https://jsfiddle.net/Paulius_Krutkis/4mb1ypqs/ 回答1: I am not sure, what is the exact issue you

问题 VueRouter always adds a trailing slash before the path of the child route. So lets say I have a route config like this: const routes = [ path: '/home', components: { default: HomeBase }, children: [ { path: '', component: HomeIndex, name: 'home.index' }, { path: ':aid', component: HomeArticle, name: 'home.article' } ] ] I want the routes to work like this: /home -> loads HomeIndex /home/123 -> Loads HomeArticle with :aid=123 But VueRouter always forces the trailing slash on the parent route

问题 VueRouter always adds a trailing slash before the path of the child route. So lets say I have a route config like this: const routes = [ path: '/home', components: { default: HomeBase }, children: [ { path: '', component: HomeIndex, name: 'home.index' }, { path: ':aid', component: HomeArticle, name: 'home.article' } ] ] I want the routes to work like this: /home -> loads HomeIndex /home/123 -> Loads HomeArticle with :aid=123 But VueRouter always forces the trailing slash on the parent route

问题 how can i abort / cancel Axios request before complete when i change route use vue-router. when user open page it automatically send axios request to get some data, but user don't waiting to get response then he is changing route by vue-router it will be a lot of Axios requests so is there any solve to my problem 回答1: Basically you have to generate a global cancel token const CancelToken = axios.CancelToken; const source = CancelToken.source(); and use it in all your requests by passing it in

问题 how can i abort / cancel Axios request before complete when i change route use vue-router. when user open page it automatically send axios request to get some data, but user don't waiting to get response then he is changing route by vue-router it will be a lot of Axios requests so is there any solve to my problem 回答1: Basically you have to generate a global cancel token const CancelToken = axios.CancelToken; const source = CancelToken.source(); and use it in all your requests by passing it in

问题 I have a small Vue.js SPA with the following router configuration, taken from the docs: export default new VueRouter({ routes, // defined above... mode: 'history', scrollBehavior(to, from, savedPosition) { if (to.hash) { return { selector: to.hash } } else if (savedPosition) { return savedPosition; } else { return { x: 0, y: 0 } } } }) Consider a link on the homepage: <router-link to="#services">Services</router-link> It jumps to the anchor element <div id="services">...</div> as expected.

问题 According to this official example, we have the ability to add nested/children routes in vuejs. But I cannot find any help/docs around a way to add these children routes dynamically. e.g only add child routes when Parent route is visited. Currently all the routes in a Vue application are defined in a single place where we create Router instance. There is an api called addRoutes, but I don't know how to use that to add lazily loaded features of application along side their routes. If someone

问题 I am trying to guard my routes by checking if the user is authenticated, this is the example route: { path: '/intranet', component: search, meta: { requiresAuth: true }, props: { tax: 'type', term: 'intranet-post', name: 'Intranet' } }, And I am setting the guard like this: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { let authenticated = this.$store.getters['auth/getAuthenticated']; if (!authenticated) { next({ path: '/login', query: {

问题 I'm working on a Vue app and have this beforeEach block that remembers a user's entry URL if they're not logged and redirects them to it after they log in. It works but... Because I'm a hack, and because I've also been getting some JWT post 401 errors recently, I'm wondering if this block might be poorly constructed and causing me problems(?) router.beforeEach((to, from, next) => { let token = JSON.parse(localStorage.getItem("userData")); token = token ? token.token : ""; if (to.fullPath !==

问题 I would like to know how can I stop component reusing in Vue-router. I'm building a simple page application and I am unable to update data after clicking the same link twice. Is it possible to somehow force reloading or what are the best practices in my situation? 回答1: Use the key attribute on router-view set to current url. It's built in, so no need to write any code. <router-view :key="$route.fullPath"></router-view> 回答2: Vue Router reuses the same component therefore the mounted hook won't