vue.js - 为着陆/登录页面设置 Vue 路由器，然后使用导航作为后端

Question

通常，在应用程序中，我会把我的部分放在模板文件中。

类似于:

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

根据路线(登录)，我想使用不同的模板。

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

我在想我可以创建两个组件:比如说登陆页面和后端。路线:[

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

后端可能看起来像我想要的那样:

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

但是，我该如何指定路由是\dashboard，我应该渲染仪表板组件？

Answer 1

File router/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>

Create File Login.vue

完成登录 View 并在登录时在 localStorage 中设置 cookie，然后重定向到路径 /

Create File Page.vue

带有页眉和页脚的完整仪表板 View 并包含 <router-view>标签

In main.js, Use this type of logic to check user is logged in before each transition & if server gives 401 status on api call, then redirecting to login page

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



  // Whenerver Server Gives 401 Status Code, it logouts and redirect to login page
Vue.http.interceptors.push(function (request, next) {
  next(function (response) {
    if (response.status === 401) {
      let msg = response.body.returnMessage
      localStorage.setItem('logoutReason', msg)
      auth.logout()
    }
  })
})

auth.user.authenticated是变量来检查 token 是否存在于本地存储中