Multi tool use

Vue Router in laravel

I am building laravel-vue website. It have member page which contain register and login components . I want when type "member#/login" then router-view will render login component. My code in app.js:

laravel-vue

router-view

app.js

import login from './components/auth/login.vue';
import register from './components/auth/register.vue';

const routes=[
{
path:'/register',
name:'register',
component: register
},
{
path:'/login',
name:'login',
component:login
}
];

const router=new VueRouter({
routes,
mode: 'history',
});
const app = new Vue({
el: '#app',
router
});


I feel it quite confusing. If my current page is home page, it may be occur bug. Someone have good ideal for this situations. Or i keep my code and use window.location for define the page, like this:

window.location

import login from './components/auth/login.vue';
import register from './components/auth/register.vue';
currentPage = window.location.pathname;
if(currentPage="public/member"){

const routes=[
{
path:'/register',
name:'register',
component: register
},
{
path:'/login',
name:'login',
component:login
}
];

const router=new VueRouter({
routes,
mode: 'history',
});
const app = new Vue({
el: '#app',
router
});
}
const app = new Vue({
el: '#app',
});


1 Answer
1

You can use the Vue Router - Nested Routes and maybe also check Vuex if your app gets larger to manage the state nicely especially if your doing the separate Member/Admin components.

In my case, I think there are better ways to address this problem but in my app I applied nested routes to solve my problem with a separate Homepage/Dashboard components like this

const routes = [
{
path: '/',
component: home,
children: [
{
path: '/',
component: home-content
},
{
path: '/login',
component: login
},
{
path: '/register',
component: register
}
}


And in your Home.vue make sure you have this inside

Home.vue

<transition mode="out-in">
<router-view></router-view>
</transition>


If you can use Vuex you can manage your members/users more easily and even you can use Navigation Guards before entering every routes like this

Vuex

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {// ...})

]

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.