Saut de routage – navigation programmatique

Introduction

En plus d'utiliser la balise créer une balise pour définir des liens de navigation, nous pouvons également implémenter la navigation via la navigation programmatique. La navigation dite programmatique ne consiste pas à passer par un lien de routeur, mais à parcourir du code à l'aide d'instances de routeur.

Exemple:

app.vue

<template>
  <div id="app">
    <button @click="toHome">Home</button>
    <button @click="toNews">News</button>
    <button @click="toDetails">Details</button>
    <br>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
      
      
    methods: {
      
      
      toHome () {
      
      
        this.$router.push('/home')
      },
      toNews () {
      
      
        this.$router.push({
      
      
          path: '/news',
          query: {
      
       name: 'zhangsan' }   //query方式传参
        })
      },
      toDetails () {
      
      
        this.$router.push({
      
      
          name: 'Details',
          params: {
      
       nid: 1001 }       //params方式传参
        })
      }
    }
  }
</script>

Accueil.vue

<template>
  <div>
    <h2>Home</h2>
  </div>
</template>

news.vue

<template>
  <div>
    <h2>News</h2>
    {
   
   {this.$route.query}}  <!—获取query传递过来的数据/ get传值 -->
  </div>
</template>

Détails.vue

<template>
  <div>
    <h2>Details</h2>
    {
   
   {this.$route.params.nid}}   <!—获取params传递过来的数据 -->
  </div>
</template>

index.js dans le répertoire du routeur

const routes = [{
  path: '/home',
  component: () => import('../views/Home')
}, {
  path: '/news',
  component: () => import('../views/News') // 懒加载
}, {
  path: '/details/:nid',
  name: 'Details',
  component: () => import('../views/Details') // 懒加载
}]

Effet:

• page par défaut
  

• Cliquez sur Accueil :
  

• Cliquez sur Actualités :
  

• Cliquez sur Détails :