编程式导航
页面导航
两种方式：
-
声明式导航：通过点击链接的方式实现导航
- 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>