页面导航的两种方式

一、声明式导航:通过点击链接的方式实现的导航
vue组件中的<router-link to="/user"></routeer-link>
二、编程式导航:调用JavaScript的api方法实现导航
1、this. $router.push();　　-

　　（1）字符串（路径参数）

　　（2）
2、this.$router.go();

 

 

<template>
<v-app>
<v-navigation-drawer app>
<!-- -->
</v-navigation-drawer>

<v-app-bar app>
<!-- -->
<div>
<v-btn color="primary" @click="toLogin">登录 </v-btn>
<v-btn @click="toRegister">注册</v-btn>
<v-btn @click="goGorward">前进</v-btn>
<v-btn @click="goBack">后腿</v-btn>
</div>

</v-app-bar>

<!-- Sizes your content based upon application components -->
<v-main>
<!-- Provides the application the proper gutter -->
<v-container fluid>
<!-- If using 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')
},
toRegister(){
// this.$router.push({path:'/layout/register'})
// this.$router.push({name:'register'})
// this.$router.push({path:'/layout/register?userId=123&name=admin'})
this.$router.push({name:'register',query:{userId:123,name:'admin'}})
},
goForward(){
this.router.go(1)
},
goBack(){
this.$router.go(-1)
}
}
}
</script>