routeChange how to use in framework7 Vuejs?

Question

How to use this function, this will serve to allow whether it is authenticated or not, to allow or not access to the view.

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;

Try the following:

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

but not function. Said instruction in the file routes.js, Basically what I try to do is the equivalent to beforeEach that is worked with vuejs

Answer 1

Basically what you have to do is add a middleware

The concept of a middleware is act before you can continue and load whatever template you need to load. So it can check if you are logged in or not and for that, nothing better than use beforeEnter.

Here is a sample with what you have

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;

Hope this helps you. Give it a read here