vueでページジャンプを実装する方法（ログインなしでジャンプ）

この記事では、vue がページ ジャンプ (非ログイン ジャンプ) を実装する方法について説明します。内容は非常に詳細です。必要な方は参照してください。

環境: vue 2.9.3; 目的:無ログインジャンプを実現するには

例：URLアドレスバーに直接入力…/homeですが、このページはログインが必要で、ログイン後に判定値がローカルキャッシュに保存されます。トークンがない場合はログイン ページに移動し、トークンがある場合はそれを開きます。

画像:

1. URL アドレスバーに http://127.0.0.1:9000/#/home を直接入力しますが、ページはパラメータ付きのログイン ページに直接ジャンプします。 UVue-Router をインストールする必要があります

ルートの最初の構成

/src/router/index.js

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',// 登录
      name: 'Login',
      component: resolve => require(['@/PACS/pages/Login'],resolve)
    },{
      path: '/home',
      name: 'Home',
      meta: {
        requireAuth: true,  // 判断是否需要登录      },
      component: resolve => require(['@/PACS/pages/Home'],resolve)
    } 
    ]

})

##

Requireauth は、ルートにログインする必要があるかどうかを判断するために使用されます。

次にmain.jsを設定します

🎜

//  路由判断登录 根据路由配置文件的参数router.beforeEach((to, from, next) => {  if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
    console.log('需要登录');    if (localStorage.token) {  // 判断当前的token是否存在 ； 登录存入的token      next();
    }    else {
      next({
        path: '/',
        query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由      })
    }
  }  else {
    next();
  }
});

🎜🎜🎜ログイン時に保存されたトークンがこちらです🎜🎜🎜🎜🎜## このようにすると、ログイン時にログインページに直接ジャンプします。 🎜🎜 ログインに成功し、入力を開始したページに戻るには、後で渡された値を使用する必要があります。 🎜🎜🎜🎜🎜🎜🎜🎜リダイレクトが含まれている場合は、入力したばかりのページにジャンプします。 🎜🎜注: ユーザーデータをローカルストレージに保存するのは不合理です。これは単なるアイデアです。ログイン後にブラウザーのデータが消去されない場合、トークンは常に存在し、判定は無効になります。 🎜🎜関連推奨事項: 🎜🎜🎜Vue-routerルーティング判定ページがログインしていない状態でログインページにジャンプします🎜🎜🎜🎜

以上がvueでページジャンプを実装する方法（ログインなしでジャンプ）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。