vue-router | 易学教程

vue-router navigate to the same route and re-run mounted hook

阅读更多关于 vue-router navigate to the same route and re-run mounted hook

问题 How can I naviagte to the current route using router-link and re-run mounted hook? HTML  <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script src="https://unpkg.com/vue-router"></script>  <div id="app"> <nav> <router-link :to="{ name: 'home' }" exact>Home</router-link> <router-link :to="{ name: 'about' }" @click.native.prevent="router.push({ name: 'about' })">About</router-link> </nav> <router-view :key="$route.fullPath"><

VueJS scroll to section from different route

阅读更多关于 VueJS scroll to section from different route

问题 I am trying to scroll to an anchor on a page using Vue and Vue Router (with history mode). When on the index page, the scroll behaviour works as expected by jumping to the section. However, when I am another page, it loads the index page at the top and not where the anchor is pointing to. I’m sure it’s a very simple thing but can’t get my head round it! Any help is appreciated! My router index: export default new Router({ scrollBehavior: function(to, from, savedPosition) { if (to.hash) {

Matching query param in vue routes

阅读更多关于 Matching query param in vue routes

问题 Is there any way to route by a query param? I would like to match the following route: site.com/?foo=123 . I've tried things like { path: '/\?foo=[\d]*' } without success. 回答1: Unfortunately, you can't match a query param in the path string of a route definition. Vue Router uses path-to-regexp , and its documentation says: The RegExp returned by path-to-regexp is intended for use with pathnames or hostnames. It can not handle the query strings or fragments of a URL. You can use regular

Vuex store.watch only accepts a function in Vue router guard

阅读更多关于 Vuex store.watch only accepts a function in Vue router guard

问题 I am trying to watch and wait until Vue router guard will get final value from Vuex however it throws [vuex] store.watch only accepts a function Here is the code: const isAdmin = _.get(store, 'getters.user/isAdmin', undefined) if (to.matched.some(record => record.meta.isAdmin)) { if (isAdmin === undefined) { const watcher = store.watch(isAdmin, isAdmin => { watcher() // stop watching if (!isAdmin) next({ path: '/not-available' }) }) } else if (serv.isAuth() && !isAdmin) { next({ path: '/not

Vuex store.watch only accepts a function in Vue router guard

阅读更多关于 Vuex store.watch only accepts a function in Vue router guard

解决通过vue-router打开tab页，下次进入还是上次history缓存的界面状态的问题

阅读更多关于解决通过vue-router打开tab页，下次进入还是上次history缓存的界面状态的问题

解决通过vue-router打开tab页，下次进入还是上次history缓存的界面状态的问题参考文章：（1）解决通过vue-router打开tab页，下次进入还是上次history缓存的界面状态的问题（2）https://www.cnblogs.com/vae860514/p/10951789.html 备忘一下。来源： oschina 链接： https://my.oschina.net/u/4438370/blog/4953063

vue实现登陆单页面

阅读更多关于 vue实现登陆单页面

一实现页面的布局 1. 首先在components里建一个login.vue < template > < div class =login_container > 登陆组件 </ div > </ template > < script > export default { } </ script > < style > </ style > 登陆组件 2. 路由的设置 router下的index.js import Vue from 'vue' import VueRouter from 'vue-router' // 导入login路劲 import login from '@/components/login' Vue.use(VueRouter) export default new VueRouter({ /* 设置路由 */ routes:[ { path: '/',redirect:'/login'}, { path: '/login',component: login} ] }) 路由的设置 3. App.vue < template > < div id ="app" > // ********* < router-view ></ router-view > </ div > </ template > < script > export default {

Vue开发之vue-router的基本使用

阅读更多关于 Vue开发之vue-router的基本使用

来源 | http://www.fly63.com/article/detial/8806 一、安装 1、如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择Yes，后面下载依赖会自动下载vue-router。 Install vue-router? Yes 2、npm npm install vue-router 二、将组件 (components) 映射到路由 (routes)并渲染步骤一使用vue-cli搭建项目，项目结构中会有一个src文件目录，src文件目录下会有一个router文件夹，此处就是用来编写路由组件的地方。在src/router/index.js，这个文件就是路由的核心文件。在这个文件里，我们需要做的是，将组件 (components) 映射到路由 (routes)。 // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) import Vue from 'vue' // 导入vue import VueRouter from 'vue-router' // 导入vue-router Vue.use(VueRouter) // 1. 定义（路由）组件 import Home from '@/components/Home' // 2. 创建 router 实例，然后传

Vuetify list : open group according to active route

阅读更多关于 Vuetify list : open group according to active route

问题 Let's suppose I have a Vuetify list with 2 v-list-group, each one containing a v-list-tile. Here is a simplified pseudo-code: - Group1 - Item 1 :to='/item1' - Group2 - Item 2 :to='/item2' My list works fine : if I click on "Item1", vue-router goes to "/item1". Conversely, when I go to some route '/item1' (by typing the URL for example) and Group1 is closed in the list, is it possible to make Group1 to automatically open in the list? Do I have to watch route and use v-list-group.value to set

Vue Router how to scroll to same hash consecutively

阅读更多关于 Vue Router how to scroll to same hash consecutively

问题 I'm currently working on a site based on Vue and using Vue Router for routing. My way to handle scroll behavior to anchor links is the following: const router = new VueRouter({ routes, scrollBehavior (to) { if (to.hash) { return { selector: to.hash, offset: { x: 0, y: 140 } } } return { x: 0, y: 0 } } }) And my links are built in the following way: <router-link class="insurance-link d-block" to="#hogar"> <img class="insurance-logo img-fluid" src="@/assets/home-icon.svg"> Hogar </router-link>