получить данные с vuex:

import {createStore} from "vuex";
const store = createStore(
    {
       state:{
        user:{
            data:{name:'Zura'},
            token:null
        }
       },
       getters:{},
       actions:{},
       mutations:{}, 
       modules:{}
    }
)

export default store;

import { mapState } from 'vuex';
export default{
    components:{
      HelloWorld
    },
    computed:{
      ...mapState(['user'])
    }
  }

</script>

<template>
 user->{{ user }}
</template>

Чтобы отрендерить дочерний компонент внутри компонента

const routes = [
    {
        path:'/',
        name:'Dashboard',
        redirect:'/dashboard',
        component:DefaultLayout,
        children:[
            {
                path:'/dashboard',name:'Dashboard',component:Dashboard
            }
        ]
    },

И теперь по адресу — / перекинет на dashboard и внутри компонента — DefaultLayout (в его router-view) покажется компонент дочерний — Dashboard

 

Импортируем остальные компоненты, и указываем те что надо отображать внутри лейаута router.js:

import { createRouter, createWebHistory } from "vue-router";
import Dashboard from "../views/Dashboard.vue";
import Surveys from "../views/Surveys.vue";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
import DefaultLayout from "../components/DefaultLayout.vue";
const routes = [
    {
        path:'/',
        name:'Dashboard',
        redirect:'/dashboard',
        component:DefaultLayout,
        children:[
            {
                path:'/dashboard',name:'Dashboard',component:Dashboard
            },
            {
                path:'/surveys',name:'Surveys',component:Surveys
            }
        ]
    },
    {
        path:'/login',
        name:'Login',
        component:Login
    },
    {
        path:'/register',
        name:'Register',
        component:Register
    },
];
const router = createRouter({
    history: createWebHistory(),
    routes
  })
export default router;

 

Проверка на авторизацию:

import { createRouter, createWebHistory } from "vue-router";
import Dashboard from "../views/Dashboard.vue";
import Surveys from "../views/Surveys.vue";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
import DefaultLayout from "../components/DefaultLayout.vue";
import store from "../store";
const routes = [
    {
        path:'/',
        name:'Dashboard',
        redirect:'/dashboard',
        component:DefaultLayout,
        meta:{requiresAuth:true},
        children:[
            {
                path:'/dashboard',name:'Dashboard',component:Dashboard
            },
            {
                path:'/surveys',name:'Surveys',component:Surveys
            }
        ]
    },
    {
        path:'/login',
        name:'Login',
        component:Login
    },
    {
        path:'/register',
        name:'Register',
        component:Register
    },
];
const router = createRouter({
    history: createWebHistory(),
    routes
  });

router.beforeEach((to,from,next)=>{
    if(to.meta.requiresAuth && !store.state.user.token){
        next({name:'Login'})
    }else if(store.state.user.token && (to.name === 'Login' || to.name === 'Register')){
        next({name:'Dashboard'});
    }else{
        next();
    }
})
export default router;

Мы добавили в роутере на страницу дашборда —

meta:{requiresAuth:true},  что означает что ее может смотреть только авторизованный

И в роутере, при переходе между страницами мы проверяем — существует ли в сторе запись о логинизации пользователя и является ли страница с обязательной логинизацией:

router.beforeEach((to,from,next)=>{
    if(to.meta.requiresAuth && !store.state.user.token){
        next({name:'Login'})
    }else if(store.state.user.token && (to.name === 'Login' || to.name === 'Register')){
        next({name:'Dashboard'});
    }else{
        next();
    }
})

Также есть проверка, если пользователь залогинен и попал на страницу логина или регистрации — то перекинуть его на страницу Dashboard, в противном случае отправить на страницу по которой он заходил.

И поменяв в ручную токен в сторе:

import {createStore} from "vuex";
const store = createStore(
    {
       state:{
        user:{
            data:{name:'Zura'},
            token:'123'
        }
       },
       getters:{},
       actions:{},
       mutations:{}, 
       modules:{}
    }
)

export default store;

Прелесть именованных маршрутов:

<router-link :to="{name:'Register'}">

46 14