[Vuejs]-Process 404 page when there is no parameter in Vue

by

0👍

I think the first problem is, that you declare router two times in your project, according to your github repo. You declared your routes in your router/index.js and imported it into your main.js. So importing it again in About.vue from vue-router instead of router.js causes, that this instance has no routes. The second problem is the same with your store, as you import store/index.js to your main.js but import a new instance from vuex to your About.vue.

If you would use the composition API, you could call the already in main.js imported modules with this, like:

this.$router.push({
   name: 'NotFound'
})

You also would get your states from your store like this:

this.$store.state.stationName

So, in composition API, use something like this in your About.vue:

<script>
export default {
  methods: {
    checkDevice() {
      if (!this.$store.state.deviceList.includes(this.$route.params.device)) {
        this.$router.push({
          name: 'NotFound'
        })
      }
    }
  },
  created() {
    this.checkDevice()
  }
}
</script>

Leave a comment