vue-router | 易学教程

How to pass pass pramas in b-nav-item using store getters?

阅读更多关于 How to pass pass pramas in b-nav-item using store getters?

问题 My route is like this - { path: '/user/:uid/myorders', name: 'my-orders', component: () => import(/* webpackChunkName: "user-orders" */ './admin/UserOrdersPage.vue'), meta: { requiresLogin: true }, beforeEnter: (to, from, next) => { checkForAuth(to, next); } }, I need to pass uid value from store.getters in b-nav-item element to navigate the page using uid from store. This is what I am doing right now. <b-nav-item href="#" v-if="this.$store.getters.isUser" tag="router-link" :to= "{name: 'my

vue-router导航守卫

阅读更多关于 vue-router导航守卫

概念导航发生变化时，导航钩子主要用来拦截导航，让它完成跳转或取消。拦截方式全局的 beforeEach - 前置钩子函数参数to、from、next to：去哪里 from：从哪里 next()：是否跳转由它决定使用场景 - 未登录去下单，跳转到登录页 afterEach - 后置钩子函数参数to、from to:去哪里 from:从哪来使用场景 - 改变浏览器title 单个路由独享的 beforeEnter 参数to、from、next 同beforeEach 组件级的 beforeRouteEnter - 进入组件前参数to、from、next 同beforeEach 使用场景 - 进入这个组件前你要做什么初始化操作 beforeRouteUpdate - 组件更新或改变时参数to、from、next 同beforeEach 使用场景 - 复用组件时（对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候） beforeRouteLeave - 离开组件时参数to、from、next 同beforeEach 使用场景 - 清除定时器等等来源： CSDN 作者：码码代码的码链接： https://blog.csdn.net/weixin_45069190/article/details/103486488

Data is clearing when I click route page About in Vue

阅读更多关于 Data is clearing when I click route page About in Vue

问题 Help me please! I have two pages: Home , About and a component SecondPage . This component has two tables with data, and it should be displayed on About page. But when I navigate to About page, all data is cleared, and tables are empty. I tried to display all from About page as About component in my main page Home , and it works! So, props are passed correctly. Why all data from tables disappearing in About page when I click it? I tried .prevent , but it doesn't work as I expect. About.vue

Conditionally bind class with Vue.js + Vuetify?

阅读更多关于 Conditionally bind class with Vue.js + Vuetify?

问题 I'm trying to conditionally apply the class "xs10" to a v-flex which contains my menu, based on the dimensions of the current screen. I've so far got something like this: <v-flex v-bind:class="{ xs10: menuSmall}" fluid> ..data() { return { menuSmall: this.$vuetify.breakpoint.mdAndUp } } But it's not working. I'm new to Vue.js + Vuetify but I'm guessing it's because menuSmall is not being re-calculated and re-rendered on every screen resize. Do I need to put it into the 'mounted' life-cycle of

Fire event when changing route before DOM changes and outside the route itself?

阅读更多关于 Fire event when changing route before DOM changes and outside the route itself?

问题 I opened a similar topic a few days ago, where I was suggested to use beforeRouteLeave within the route component definition. However, I'm creating a Vue component and I won't have control over how developers wants to define their route components. Therefore, I need a way to fire an event within my own component and don't rely on external route components. When changing from one route to another, the beforeDestroy gets fired after the DOM structure changes. I've tried using beforeUpdate and

Vue: props passed to router-link

阅读更多关于 Vue: props passed to router-link

问题 I want to have 3 main parts in my webapp: App.vue - this page only has the <router-view> tag and some general configuration + it fetches an API every second ControlPanel.vue - this page visualizes some data that the App.vue page gets Profile.vue - this page visualizes some data that the App.vue page gets too Right now I set up my App.vue with the API call and it passes the data it receives to the two pages with props like the following example. As you can see when it gets mounted it starts a

hide query params in address bar - VueJS

阅读更多关于 hide query params in address bar - VueJS

问题 I'm using Vue.js 2 and I'm trying to create a link that should send me to another page. This is what I have: <div v-for="u in myList"> <router-link :to="'/type/' + u.name"><a>{{u.name}}</a></router-link> </div> The above piece of code works but now I would like to pass a parameter ( u.weight for example ) along with this link. I took a look at query parameters but I don't want the user to see this in the address bar type/productname/?queryparamshere . Is there a way to hide query params, or

In Vue.js, how do you prevent navigation for a subroute?

阅读更多关于 In Vue.js, how do you prevent navigation for a subroute?

问题 The nice thing about beforeRouteLeave is that you can prevent navigating away under certain conditions. I have a setup that uses a subroute to render part of the page. I would like a navigation guard on the subroute to prevent switching to another one if the data is not saved. { path: '/customers/view', component: ViewCustomerShell, children: [ {path: ':id', name: 'ViewCustomer', component: ViewCustomer} ] }, So when I visit /customers/view/12 and make a change, if they try to load /customers

Screen readers & tab focus resets for vue-router

阅读更多关于 Screen readers & tab focus resets for vue-router

问题 Seems like focus resets and screen readers noticing route changes isn't part of vue-router. I can see why vue might leave this out since use cases might vary, but I'm surprised at the lack of info about accessibility / SPA routers. This seems like a common SPA issue and I'm curious if anyone has a recommended solutions to this or if there are plans to implement this into the core of vue-router. Seems like dedicated aria-live region might be a decent option for announcing page changes, but I'm

Laravel - Middleware triggered while it should not?

阅读更多关于 Laravel - Middleware triggered while it should not?

问题 I'm using Laravel 5.4 and Vuejs 2.3 along with VueRouter I have a website that consists of two parts example.com example.com/tools Problem If I am at example.com/tools and if I reload the page to the same address example.com/tools the middleware checkUsersPublic is triggered whereas it is only linked to / . Edit If I remove { path: '/tools', component: Stats } from VueRouter.js the middleware is not triggered anymore Question What should I do change so the middleware is not triggered ? Routes