添加点击跳转页面，优化登录和注册页路由

牛奶味的团子

于 2024-07-09 14:52:13 发布

阅读量335

点赞数 8

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_74356429/article/details/140291305

版权

一、给注销按钮添加点击跳转至登录页

1、在路由中添加登录页路由

2、自定义登录页面

3、在app.vue页面找到下拉框组件，添加点击事件

4、使用vue-router中的useRoute和useRouter

点击后可以跳转，但是还存在问题，路径这里如果我们需要更改登录路径时，两个都要修改

可以在路由中使用名字

在页面跳转时使用姓名这个属性的值进行跳转

5、代码App.vue

<template>

    <div class="common-layout">
        <el-container>
            <el-header>
                <div><img src="/logg.jpg" class="logo" /></div>
                <div>
                    <el-icon>
                        <User />
                    </el-icon>
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                           李四
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="a">Action 1</el-dropdown-item>
                                <el-dropdown-item command="b">Action 2</el-dropdown-item>
                                <el-dropdown-item command="c">Action 3</el-dropdown-item>
                                <el-dropdown-item divided command="logout">注销</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <Menu></Menu>
                </el-aside>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>


</template>
<script setup lang="ts">
import Menu from '@/components/Menu.vue';
import { useRoute,useRouter } from 'vue-router';


// 带r    负责页面跳转
const route = useRoute();
// 不带r  获取当前页面相关信息（路径，参数）
const router = useRouter()

const handleCommand = (command: any) => {
  if (command == "logout"){
     router.push({name:"login",query:{id:123}})
  }
}

</script>

<style>
.logo {
    height: 25px;
}
.el-header {
  background-color: #004a70;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
}

.el-aside {
  background-color: #004a70;

  height: calc(100vh - 70px);
}
</style>

二、设置登录页和注册页不使用路由边框

登录页只需要中间内容区域就可以了

在路由中设置是否使用路由框架属性

在App.vue页面中进行判断

代码:App.vue

<template>


<div v-if="$route.meta.isUseFrame == false">
   <RouterView></RouterView>
</div>

<div v-else>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div><img src="/logg.jpg" class="logo" /></div>
                <div>
                    <el-icon>
                        <User />
                    </el-icon>
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                           李四
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="a">Action 1</el-dropdown-item>
                                <el-dropdown-item command="b">Action 2</el-dropdown-item>
                                <el-dropdown-item command="c">Action 3</el-dropdown-item>
                                <el-dropdown-item divided command="logout">注销</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <Menu></Menu>
                </el-aside>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</div>


</template>
<script setup lang="ts">
import Menu from '@/components/Menu.vue';
import { useRoute,useRouter } from 'vue-router';


// 带r    负责页面跳转
const route = useRoute();
// 不带r  获取当前页面相关信息（路径，参数）
const router = useRouter()

const handleCommand = (command: any) => {
  if (command == "logout"){
     router.push({name:"login",query:{id:123}})
  }
}

</script>

<style>
.logo {
    height: 25px;
}
.el-header {
  background-color: #004a70;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
}

.el-aside {
  background-color: #004a70;

  height: calc(100vh - 70px);
}
</style>