Vue-router: Route Segments and 404's

[joedawson]

Hello all,

Vue is awesome, really loving 1.0! I have two questions (_I'll explain what my issue is below after I have shown my existing code_).

• Q1. Why does my component not fire the ready() method each time the segment changes?
• Q2. How can I handle 404's for a resource that does not exist?

My routes look like this:

// Views are imported

router.map({
    '/':                        { component: HomeView },
    '/category/:category':      { component: CategoryView },
    '*':                        { component: NotFoundView }
});

My CategoryView looks like this...

<template>
    <h1>{{ category.name }}</h1>
    <hr>
    <div class="row products">
        <div class="col-sm-4" v-for="product in category.products.data">
            <product :product="product"></product>
        </div>
    </div>
</template>

<script>
import Product from "../components/Product.vue";

export default {

    name: 'CategoryView',

    props: {
        category: Object
    },

    components: {
        Product
    },

    ready: function() {
        this.getCategory();
    },

    methods: {

        getCategory: function() {
            this.$http.get('/api/categories/' + this.$route.params.category + '?include=products', function(category) {

                // Set Category
                this.$set('category', category.data);

            }).error(function(resp) {

                // Category does not exist

            });
        }

    }

}
</script>

Q1. In all of my views, I have my navigation which includes all of my categories. When I select the first category, the ready() function gets fired and fetches the category and it's products.

My problem is, if I select another category from the navigation - the active link changes - but my view does not change, updating the category name and it's products.

Here's my example (screencast):

You can see the issue at 12 seconds.

Q2. Finally, if I was to access a category that does not exist. Let's say /category/doesNotExist - how can I "throw" my NotFoundView here?

I look forward to hearing from you - I appreciate any help!

[yyx990803]

If you want to react to route changes then you should be using the route hooks: http://router.vuejs.org/en/pipeline/index.html

[joedawson]

Hey @yyx990803, do you know of any working examples? Fairly new to Vue still :)

[joedawson]

After taking a look, I understand it now I think. I'm using this:

route: {
    canReuse: function (transition) {
        transition.to
    }
}

Not entirely sure if that's correct way to do it, but it works :smiley:

Lastly then, how would I throw a 404 for an invalid category in this case?

[amirrustam]

@JoeDawson to answer your second and last question you can use router.go to direct to a 404 route. Here is the documentation: http://vuejs.github.io/vue-router/en/api/go.html

If all your questions are answered then please close out this issue. In the future, these type of questions are best suited for the community forums, gitter, or stackoverflow. Please review the Issue Reporting Guidelines.

[joedawson]

Oh I'm way past this now, thanks for the response though @amirrustam.

[Mouvedia]

@amirrustam how ironic, http://router.vuejs.org/en/api/go.html is a 404.