Vue案例

路由守卫：页面跳转。

在main.js文件中书写。路由要在这里设置。

//设置路由守卫
//判断sessionStorage对象中是否有登录的对象
let login = sessionStorage.getItem("login")
router.beforeEach((to, from, next) => {
    //如果有对象，允许跳转
    if (to.path =='/' || login) {
        next()
    } else {
        //回到登录页面
        router.push('/')
    }
})

 全局优化

 每个视图都要重复写，还有很多增删改查请求，每次请求都要去调用，效率低下

import axios from 'axios';

import qs from 'qs'

axios.post('http://localhost:8888/elm/login'

 统一在main.js中去设置为全局变量

import axios from 'axios';
import qs from 'qs'
//设置为全局的路径
axios.defaults.baseURL ='http://localhost:8888/elm'

let app = createApp(App)
//将axios和qs设置Vue的全局属性，所有vue组件直接使用
//$axios为名字，=的右边是将上方定义好的变量进行赋值。
app.config.globalProperties.$axios = axios 
app.config.globalProperties.$ps = ps 
app.use(router).mount('#app')

子路由

1.在views文件夹下，创建视图(组件)BusinessQuery.vue

2.index.js文件中，导入组件

3.在index.js文件中，加载子路由。（因为是在index.js中实现跳转）

给.vue文件添加对应css文件

@表示src路径

 监听数据（监听集合）

 

 数组遍历后，给每个食物对象添加了num属性，默认等于0

 将查出的数据放到foodList数组中。

 监听这个数组。        deep：true 是深度监听。

悬浮头

Css样式
/* --------------------总容器-------------------- */
.wrapper {
    width: 100%;
    height: 100%;
    user-select: none;
    background-color:#F0F0F0;
}

/* --------------------头部-------------------- */
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 4.8vw;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 100;
}

悬浮尾(共用组件流程)

1.把代码放入components文件夹中

<template>
  <footer>
                <ul>
                    <li @click="goIndex">
                        <i class="fa fa-home"></i> 
                        <p>云医院</p>
                    </li>
                    <li >
                        <i class="fa fa-compass"></i>
                        <p>商城</p>
                    </li>
                    <li @click="goOrderList">
                        <i class="fa fa-file-text-o"></i>
                        <p>发现</p>
                    </li>
                    <li >
                        <i class="fa fa-user-o"></i>
                        <p>我的</p>
                    </li>
                </ul>
            </footer>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
    goIndex() {
      let login = sessionStorage.getItem('login');
      if (login == null) {
        this.$router.push('/login')
      } else {
        //已登录，跳转到主页
        this.$router.push('/')
      }
      
    },
    goOrderList() {
        let login = sessionStorage.getItem('login');
      if (login == null) {
        this.$router.push('/login')
      } else {
        //已登录，跳转订单页面
        this.$router.push('/orderlist')
      }
        
    }
  },
  components: {},
  computed: {},
  watch: {},
  mounted () {}
}
</script>
<style src="@/assets/css/tab.css" scoped>
</style>

2.在使用页中，导入组件，并注册到组件中。

名字一样可省略

3.使用

 

根据性别，显示先生/女士

 

钩子函数，在页面加载时，从Session Storage中获取

调用issex(sex)方法，返回不同的值