Salto de enrutamiento: navegación programática

Introducción

Además de utilizar la etiqueta Crear una para definir enlaces de navegación, también podemos implementar la navegación mediante navegación programática. La llamada navegación programática se refiere no a saltar a través del enlace del enrutador, sino a saltar a través del código con la ayuda de instancias del enrutador.

Ejemplo:

aplicación.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>

Inicio.vue

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

noticias.vue

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

Detalles.vue

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

index.js en el directorio del enrutador

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

Efecto:

• página por defecto
  

• Haga clic en Inicio:
  

• Haga clic en Noticias:
  

• Haga clic en Detalles: