Using multiple pages (components) dynamically in Vue js

Solution:

You might want to use a good router for handling the pages dynamically and in SPA format. Seems like Laravel Nova is using vue-router.

It is installed under the custom component as you create it and if you want to use other vue files or switch between them, you need to add your route under nova-components\[your-component-name]\resources\js\tool.js file by adding an object into the array of routes in this format:

{
        name: '[route-name]',
        path: '/[route-path]/:[sent-prop-name]',
        component: require('./components/[your-vue-file]'),
        props: route => {
            return {
                [sent-prop-name]: route.params.[sent-prop-name]
            }
        }
},

After adding the router to this file you can always use <router-link></router-link> component inside your Vue files to redirect to whatever route you desire (you can also send data to the route as props). The main format of it is like this:

    <router-link
                class="btn btn-default btn-primary"
                target="_blank"
                :to="{
                          name: '[destination-route-name]',
                          params: {
                                     [your-data-name]: [your-data-value]
                          }
                 }"
                 :title="__('[your-title]')"
     >

      Submit                  

     </router-link>

P.S: Of course you can omit props and params from both if you don’t intend to send and receive any data to the file.

P.S: You can always take look at vue-router documentation here for more features.