Normally, in an app, I would put my partials in a template file.
Something like:
<app>
<nav></nav>
<sidebar></sidebar>
<router-view></router-view>
<footer></footer>
</app>
Depending on the route (login), I want to use a different template.
<app>
<login></login>
</app>
I was thinking I could create two components: say landing-page and Backend. routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/dashboard',
name: 'content',
component: Backend
}
]
Backend could look like I want it to:
<backend>
<nav></nav>
<sidebar></sidebar>
<router-view></router-view>
<footer></footer>
</backend>
However, how would i specify that then the route is \dashboard, I should render the dashboard component?
You can use $router. push({ name: "yourroutename"}) or just router. push("yourroutename") now to redirect.
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
Complete Login View and When Logged in set cookie in localStorage, then redirect to path /
Create File Page.vue
Complete Dashboard view with Header and Footer and Include a <router-view>
tag
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
is variable to check whether token exists in localstorage or not
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With