vue-router

Redirecting twice in a single Vue navigation

由 无人久伴 提交于 2020-12-30 05:59:16
问题 In my Vue app, a user's homepage depends on their role. To ensure that a user is shown the correct homepage, I use this navigation guard: export default (to, from, next) => { const authService = getAuthService() if (to.path === '/') { // if they've requested the home page, send them to // different pages depending on their role if (authService.isUser()) { next({ name: 'events' }) } else if (authService.isAdmin()) { next({ name: 'admin-events' }) } else { next() } } } Then when a user

How to get Vue Router Params in Vuex?

由 江枫思渺然 提交于 2020-12-29 06:20:06
问题 I'm not able to use this.$route.params route.params router.params how do I get the params of $route in my actions? 回答1: in your actions.js or store.js import router from 'path/to/router' console.log(router.currentRoute.params) 回答2: You can access the current route through the state or rootState with Vuex. If the action is in a module, use rootState: MY_ACTION: ({rootState}) => new Promise((resolve, reject) => { let params = rootState.route.params // do stuff } If the action is not in a module

How to get Vue Router Params in Vuex?

由 爱⌒轻易说出口 提交于 2020-12-29 06:19:03
问题 I'm not able to use this.$route.params route.params router.params how do I get the params of $route in my actions? 回答1: in your actions.js or store.js import router from 'path/to/router' console.log(router.currentRoute.params) 回答2: You can access the current route through the state or rootState with Vuex. If the action is in a module, use rootState: MY_ACTION: ({rootState}) => new Promise((resolve, reject) => { let params = rootState.route.params // do stuff } If the action is not in a module

How to get Vue Router Params in Vuex?

由 我们两清 提交于 2020-12-29 06:19:02
问题 I'm not able to use this.$route.params route.params router.params how do I get the params of $route in my actions? 回答1: in your actions.js or store.js import router from 'path/to/router' console.log(router.currentRoute.params) 回答2: You can access the current route through the state or rootState with Vuex. If the action is in a module, use rootState: MY_ACTION: ({rootState}) => new Promise((resolve, reject) => { let params = rootState.route.params // do stuff } If the action is not in a module

Vue-router on apache, SPA in sub-directory, can only access pages by redirect

由 妖精的绣舞 提交于 2020-12-28 07:58:32
问题 So I have a Vue app for a client set up on an apache dev server. I am doing this to match the production environment. The app is in a subdirectory and I set the 'base' option on vue-router to match. If I navigate to my virtual host root it redirects properly, however navigating to the same address by typing the address in gives a 404. Here is my router code: const routes = [ {path: '/', redirect: '/london' }, {path: '/:city', component: homeView} ] const router = new VueRouter ({ mode:

Vue-router on apache, SPA in sub-directory, can only access pages by redirect

由 馋奶兔 提交于 2020-12-28 07:49:23
问题 So I have a Vue app for a client set up on an apache dev server. I am doing this to match the production environment. The app is in a subdirectory and I set the 'base' option on vue-router to match. If I navigate to my virtual host root it redirects properly, however navigating to the same address by typing the address in gives a 404. Here is my router code: const routes = [ {path: '/', redirect: '/london' }, {path: '/:city', component: homeView} ] const router = new VueRouter ({ mode:

Vue+Django独立开发电商项目

由 為{幸葍}努か 提交于 2020-12-27 08:26:08
适用人群 1、想要学习前后端分离开发的小伙伴。 2、有一定Django基础的小伙伴。 3、有一定HTML+CSS+JS基础的小伙伴。 课程概述 本课程从零讲解Vue全家桶（vue+vue-cli+vue-router+vuex+axios），以及Django中非常流行的django-restframework前后端分离框架，讲解非常仔细到位。项目部分是用vue+django打造的一个电商项目，有移动端（H5网站），PC端。项目中涉及商家、商品、购物车、支付等功能。不管你是做运维还是做测试还是做开发，学完本课程都能有很大的收获 攻城狮： http://www.54gcshi.com/forum.php?mod=viewthread&tid=194 目录 章节1:Vue基础，领优惠+微信:zhiliaoketang008 再买试看 课时1视频【Vue基础】VSCode介绍13:08可试看 课时2视频【Vue基础】Vue体验14:43 课时3视频【Vue基础】v-bind属性绑定12:06 课时4视频【Vue基础】VSCode添加自定义代码片段11:51 课时5视频【Vue基础】Class和Style属性绑定15:28 课时6视频【Vue基础】执行JavaScipt表达式10:00 课时7视频【Vue基础】v-if条件判断15:34 课时8视频【Vue基础】v-show和v-if10

vue 路由拦截、axios请求拦截

由 老子叫甜甜 提交于 2020-12-24 22:24:49
路由拦截 项目中，有些页面需要登录后才能进入，例如，在某页面A，用户在操作前需要先进入登录页（此时需要将上一页的地址（ /survey/start ）作为query存入login页面的地址中，如: http://localhost:8071/#/login?redirect=%2Fsurvey%2Freport ），登录成功后再进入页面A。 首先，在router.js中创建路由时，给需要登录的路由中的 meta 添加字段：requireLogin，如下： const router = new Router({ routes: [ { path: '/login', name: 'Login', component: Login, meta: { title: '登录页' } }, { path: '/register', name: 'Register', component: Register, meta: { title: '注册页' } }, { path: '/', redirect: '/survey/start', name: 'Full', component: Full, children: [ { path: '/survey/start', name: 'Home', component: Home, meta: { title: '首页',

Vue之Vuex

由 淺唱寂寞╮ 提交于 2020-12-19 07:35:24
Vue之Vuex Vue全家桶 vue + vue-router + vuex 更能体现vue的mvvm设计模式，其中： vuex相当于mvvm中的View视图 vue-router相当于ViewModel控制器 vuex相当于Model数据模型 vue全家桶，基本上网页上什么都可以实现 为什么要使用Vuex 解决组件间传值的复杂性，vuex好比一个商店任何组件都可以进去拿东西 安装Vuex 官网 npm install vuex --save 前后端分离项目 现在用vue + vue-router + vuex做一个项目： webpack 从今以后就要用vue-cli里的webpack模板了 vue init webpack npm run dev启动 main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import $ from 'jquery' // 这种奇葩的语法是因为webpack帮你导入了里面的文件 import router from '

使用Vue-Router的导航守卫-无限循环问题

由 荒凉一梦 提交于 2020-12-18 08:52:50
我在项目里面用到了的是全局守卫，beforeEach,方便管理 不过遇到了一个问题，就是在beforeEach()中设置好判断条件后出现了无限循环的问题 当时的代码如下： router.beforeEach((to, from, next) => { if (isLogin) { next() } else { console.log('测试') next('login') } }) 结果chrome的debug中看到： 这个问题我是这样理解的： next() 表示路由成功，直接进入to路由，不会再次调用router.beforeEach() next('login') 表示路由拦截成功，重定向至login，会再次调用router.beforeEach() 也就是说beforeEach()必须调用next(),否则就会出现无限循环，next() 和 next('xxx') 是不一样的，区别就是前者不会再次调用router.beforeEach()，后者会！！！ 官网这样写的（主要是红线标记的那句！）： 最终解决的代码如下： router.beforeEach((to, from, next) => { if (isLogin) { next() } else { if (to.name === 'login') { next() } else { console.log('测试')
订阅 vue-router