Skip to content

Using router in Vue components is discouraged #1945

Open
@JoJk0

Description

@JoJk0

URL
The URL at which the content is missing or inaccurate

https://ionicframework.com/docs/vue/navigation

What is missing or inaccurate about the content on this page?

According to Vue Router docs, Vue Router instance should not be coupled to components. I suggest for the docs to be changed to use passing route params to props by Vue.

So instead:

export default defineComponent({
  name: 'Detail',
  components: {
    IonContent, 
    IonHeader, 
    IonPage, 
    IonTitle, 
    IonToolbar
  },
  setup() {
    const route = useRoute();
    const { id } = route.params;
    return { id };
  }
})

It's better to do:

export default defineComponent({
  name: 'Detail',
  components: {
    IonContent, 
    IonHeader, 
    IonPage, 
    IonTitle, 
    IonToolbar
  },
  props: {
    id: {
      type: String
    }
  },
  setup() {
    return { };
  }
})

and setting props: true in specified route record in router file.

Metadata

Metadata

Assignees

No one assigned

    Labels

    contentIssues related to the contents of the documentation websitepackage: vueIssues related to the Ionic Vue documentation

    Type

    No type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions