Vue路由-编程式导航

学习笔记
1

编程式导航

页面导航

两种方式：

  • 声明式导航：通过点击链接的方式实现导航

    • vue组件中的

  • 编程式导航：调用JS的api方法实现导航

    • this.$router.push();

    • this.$router.go();

示例：

<template>
  <!-- App.vue -->
  <v-app>
    <v-navigation-drawer app>
      <!-- -->
    </v-navigation-drawer>

    <v-app-bar app>
      <!-- 顶部栏 -->
      <div>
        <!-- @绑定点击事件，后面指定事件方法 -->
        <v-btn color="blue" @click="toLogin">登录</v-btn>
        <v-btn @click="toRegister">注册</v-btn>
        <v-btn @click="goForward">前进</v-btn>
        <v-btn @click="goBack">后退</v-btn>
      </div>
    </v-app-bar>

    <!-- 根据应用组件来调整你的内容 -->
    <v-main>
      <!-- 给应用提供合适的间距 -->
      <v-container fluid>
        <!--vue-router 将设置好的子路由的组件显示在这里-->
        <router-view></router-view>
      </v-container>
    </v-main>

    <v-footer app>
      <!-- -->
    </v-footer>
  </v-app>
</template>

<script>
  export default {
    methods:{
      // 定义事件方法
      toLogin(){
        // 传递字符串
        // 通过router实例调用push方法，跳转到对应路由
        // this.$router.push("/layout/login")
        // 地址中传递参数
        this.$router.push("/layout/login?userId=234&name=admin")
      },
      toRegister(){
        // 传递对象
        // this.$router.push({path: '/layout/register'})
        // 路由的name（传递参数）
        this.$router.push({name: 'register', query:{userId: 123, name: 'admin'}})
      },
      goForward(){
        // 前进
        this.$router.go(1)
      },
      goBack(){
        // 后退
        this.$router.go(-1)
      }
    }
  };
</script>