routeChange, как использовать в framework7 Vuejs? - PullRequest
Новая
       41

routeChange, как использовать в framework7 Vuejs?

0 голосов
/ 05 июля 2019

Как использовать эту функцию, она будет служить для разрешения, аутентифицирована она или нет, для разрешения или отсутствия доступа к представлению. 

import Home from './assets/vue/pages/home.vue';
import AboutPage from './assets/vue/pages/about.vue';
import PanelLeftPage from './assets/vue/pages/panel-left.vue';
import ColorThemes from './assets/vue/pages/color-themes.vue';
import Chat from './assets/vue/pages/chat.vue';


const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about/',
    component: AboutPage
  },     {
  {
    path: '/panel-left/',
    component: PanelLeftPage
  },
  {
    path: '/chat/',
    component: Chat
  },
];


 export default routes;

Попробуйте выполнить следующее: 

routes.routeChange((to, from, next) => {
  console.log("routeChange");
  console.log(to);
  console.log(from);
  console.log(next);
});

но не работает.Указанная инструкция в файле rout.js, в основном, я пытаюсь сделать, это эквивалентно beforeEach, который работает с vuejs

1 Ответ

1 голос
/ 05 июля 2019

В основном вам нужно добавить промежуточное ПО

Концепция промежуточного программного обеспечения - это действие, прежде чем вы сможете продолжить и загрузить любой шаблон, который вам нужно загрузить. Таким образом, он может проверить, вошли ли вы в систему или нет, и для этого нет ничего лучше, чем использовать beforeEnter .

Вот пример с тем, что у вас есть 

import Home from './assets/vue/pages/home.vue';
import AboutPage from './assets/vue/pages/about.vue';
import PanelLeftPage from './assets/vue/pages/panel-left.vue';
import ColorThemes from './assets/vue/pages/color-themes.vue';
import Chat from './assets/vue/pages/chat.vue';

function MyAuthMiddleware(to, from, next) {
    //Do your rules here
    console.log("To: ", to);
    console.log("From: ",from);
    //Example
    if (!Store.state.user.logged) {
        next({
            path: "/login"
        });
    } else {
        next();
    }
}



const routes = [
  {
    path: '/',
    component: Home,
    beforeEnter: MyAuthMiddleware
  },
  {
    path: '/about/',
    component: AboutPage,
    beforeEnter: MyAuthMiddleware
  },
  {
    path: '/panel-left/',
    component: PanelLeftPage,
    beforeEnter: MyAuthMiddleware
  },
  {
    path: '/chat/',
    component: Chat,
    beforeEnter: MyAuthMiddleware
  },
];

export default routes;

Надеюсь, это поможет вам. Дайте ему прочитать здесь

...