How to use a component depending on the route-CodePudding

Hello I am currently doing the front end of my project.

I would like to render components dynamically depending on the route. For example I have a /auth route then it links to /auth/login or /auth/register or /auth/forgot.

This is the place where I would like to see the different components rendered. I was assuming I can use router-view to loud the different components into the DOM.

<template>
<head-comp></head-comp>
<router-view></router-view>
<footer-comp></footer-comp>
</template>

<script>
import HeaderComp from '../components/Universal/HeaderComp.vue'
import FooterComp from '../components/Universal/FooterComp.vue'
export default
{
  components: {
    'header-comp' : HeaderComp,
    'footer-comp' : FooterComp
  }
}

</script>

This is the router

    {
      path: '/auth',
      name: 'auth',
      component: () => import('../views/AuthView.vue'),
      children: [
        { 
        path: 'login',
        name: 'auth.login',
        component: () => import('../components/Authentication/LoginComp.vue') 
      },
      ],
    }

And this is the vue file that will contain the login form.

<tempalte>
Login
</tempalte>

<script>

</script>

The error I get with my current approach is this.

The requested module '/src/components/Authentication/LoginComp.vue?vue&type=tempalte&index=0&lang.tempalte' does not provide an export named 'default'

I was thinking I could just use different views for example, login/registerView.vue instead of having them in components but I feel like this is messier and would make it harder to maintain in the future.

Thanks for reading and looking forward to your responses.

CodePudding user response：

You have typos in your LoginComp.vue component.

<tempalte>
Login
</tempalte>

should be

<template>
Login
</template>