routeChange如何在framework7 Vuejs中使用？

Question

如何使用这个功能，这个可以用来允许是否认证，是否允许访问视图。

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);
});

但没有功能。文件中的说明 routes.js, 基本上我尝试做的是等同于与 vuejs

一起工作的 beforeEach

Answer 1

基本上你要做的就是添加一个中间件

中间件 的概念是在您可以继续并加载您需要加载的任何模板之前采取行动。因此它可以检查您是否登录，为此，没有什么比使用 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;

希望对您有所帮助。读一读 here

routeChange如何在framework7 Vuejs中使用？

routeChange how to use in framework7 Vuejs?

html-framework-7

vuejs2