Vue着陸/ログインページのルーター設定とナビゲーション付きバックエンド

Question

通常、アプリでは、私はテンプレートファイルに自分のパーシャルを入れます。以下のような

何か：ルート（ログイン）によって

<app> 
    <nav></nav> 
    <sidebar></sidebar> 
    <router-view></router-view> 
    <footer></footer> 
</app> 

は、私は別のテンプレートを使用します。

<app> 
    <login></login> 
</app> 

ランディングページとバックエンドの2つのコンポーネントを作成できると考えていました。 路線：[私はそれをしたいよう

{ 
     path: '/', 
     name: 'Login', 
     component: Login 
    }, 
    { 
     path: '/dashboard', 
     name: 'content', 
     component: Backend 
    } 
    ] 

バックエンドを見ることができる：

<backend> 
    <nav></nav> 
    <sidebar></sidebar> 
    <router-view></router-view> 
    <footer></footer> 
</backend> 

しかし、どのように私はその後、ルートはダッシュボードを\されて、私はダッシュボード・コンポーネントをレンダリングするように指定しますか？

Answer 1

ファイルルータ/ index.js

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     component: Page, 
     children: [ 
     { 
      path: '', 
      name: 'Dashboard', 
      component: Dashboard, 
      auth: true 
     }, 
     { 
      path: 'users', 
      name: 'Users', 
      component: Users, 
      auth: true 
     } 
     ] 
    }, 
    { 
     path: '/login', 
     name: 'Login', 
     component: Login 
    } 
    ] 
}) 

App.vue

<template> 
    <div class="main-component"> 
    <router-view></router-view> 
    </div> 
</template> 

<script> 
    export default { 
    name: 'app' 
    } 
</script> 

作成ファイルLogin.vue

コンプリートログインビューとのlocalStorageで設定したクッキーにログインすると、その後、/

パスにリダイレクトファイルを作成しPage.vueヘッダーとフッターと

完全なダッシュボード・ビューとは<router-view>タグを含める

main.jsでは、このタイプのロジックを使用して、各トランジションの前にユーザーがログインしていることを確認します。

router.beforeEach(function (to, from, next) { 
    console.log('beforeEach', to.path + ' - Auth: ' + auth.user.authenticated) 
    if ((to.path !== '/login' && to.path !== 'login') && !auth.user.authenticated) { 
    next({ path: '/login' }) 
    } else if ((to.path === '/login' || to.path === 'login') && auth.user.authenticated) { 
    next({ path: '/' }) 
    } else { 
    next() 
    } 
}) 

auth.user.authenticatedは、トークンが

のlocalStorageに存在するか否かを確認するための変数であります