Loading Default Component - Vue.js CDN

Question

How do I load a component in the <router-view> when the page by default on that page? I want to have a default when there is no :id

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


    <div id="app">
        <p>
            <router-link to="/product">/product</router-link>
            <router-link to="/product/foo">/product/foo</router-link>

        </p>
        <router-view>

        </router-view>
    </div>
    <script>
    const Product = {template: `<div class="user"> <h2>User {{ $route.params.id }}</h2></div> `}

    const router = new VueRouter({

    routes: [
        {
            path: '/product/:id', component: Product, 
        }
    ],

    mode: 'history',

    })

    const app = new Vue({ 
        router 
    })

    .$mount('#app')

    </script>

Use [optional parameter](https://stackoverflow.com/a/47828416/3226121). `path: '/product/:id?` — ljubadr, Jan 10 '19 at 22:52
In the component you can also specify [default values](https://vuejs.org/v2/guide/components-props.html#Prop-Validation) — ljubadr, Jan 10 '19 at 22:55

score 1 · Accepted Answer · answered Jan 10 '19 at 23:12

For the vue router you can use optional parameter.

So instead of path: '/product/:id' you can write path: '/product/:id? (added ? at the end)

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <p>
        <router-link to="/product">/product</router-link>
        <router-link to="/product/foo">/product/foo</router-link>
    </p>

    <router-view></router-view>
</div>

<script>
    const Product = {
        /*
            router `id` will be passed as prop
            so we can use `id` in our templates instead of $route.params.id
            this way we can also specify the default value is nothing was passed
         */
        template: `<div class="user"> <h2>User {{ id }}</h2></div> `,
        props: {
            id: {
                type:    String,
                // specify default value if id is not passed to the router
                default: 'N/A'
            }
        }
    }

    const router = new VueRouter({
        mode: 'history',
        routes: [
            {
                // :id? means that it's an optional parameter
                path: '/product/:id?',
                component: Product,
                // Passing Props to Route Components
                props:     true
            },
        ],
    })

    const app = new Vue({
        router
    })
    .$mount('#app')

</script>

Do you know how I could make that template in `const Product` an external file? — Bryan Sanders, Jan 11 '19 at 06:11
[This answer](https://stackoverflow.com/a/48442780/3226121) should help — ljubadr, Jan 11 '19 at 08:33

Loading Default Component - Vue.js CDN

1 Answers1