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中使用？

1 个答案: