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

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

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>

 

最近更新

  1. Oracle(15)什么是索引(Index)?

    2024-07-11 01:34:02       0 阅读
  2. CSS 的@media规则,响应式的一种解决方案

    2024-07-11 01:34:02       0 阅读

热门阅读

  1. MyBatis 框架核心及面试知识要点

    2024-07-11 01:34:02       8 阅读
  2. NLP - 基于bert预训练模型的文本多分类示例

    2024-07-11 01:34:02       8 阅读
  3. 二刷算法训练营Day57 | 动态规划(17/17)

    2024-07-11 01:34:02       7 阅读
  4. 自定义业务非受检异常

    2024-07-11 01:34:02       8 阅读
  5. GPT-5 一年半后发布?对此你有何期待?

    2024-07-11 01:34:02       7 阅读
  6. DSC主备归档报错

    2024-07-11 01:34:02       9 阅读
  7. DangerWind-RPC-framework---三、服务端下机

    2024-07-11 01:34:02       6 阅读
  8. spring管理bean源码解析

    2024-07-11 01:34:02       7 阅读
  9. a+=1和a=a+1的区别

    2024-07-11 01:34:02       7 阅读