前端框架~VUE~day07 之 element-ui的使用、状态管理器、router使用、localstorage和sessionstorage,和cookie

er仔琪

已于 2023-06-13 16:56:29 修改

阅读量226

点赞数

分类专栏：前端框架VUE 文章标签：前端框架 vue.js html npm

于 2023-06-12 22:37:37 首次发布

本文链接：https://blog.csdn.net/weixin_55672697/article/details/131168444

版权

前端框架VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

VUE之element-ui的使用、状态管理器、router使用、多级路由、路由守卫、localstorage和sessionstorage,和cookie

文章目录

VUE之element-ui的使用、状态管理器、router使用、多级路由、路由守卫、localstorage和sessionstorage,和cookie
一、element-ui的使用
二、状态管理器(vuex)
- 2.1、vuex的使用
三、router使用（重点）
四、路由的两种工作模式
四、localstorage和sessionstorage,和cookie
总结

提示：以下是本篇文章正文内容，下面案例可供参考

一、element-ui的使用

1.1、安装

npm install babel-plugin-component -D
cnpm install element-ui -S
这两种方式都是安装最新的版本

cnpm isntall -S element-ui@2.9.1
这是安装老版本

1.2、完整引用 Element（在 main.js 中写入以下内容）

import ElementUI from 'element-ui';  // 把对象引入
import 'element-ui/lib/theme-chalk/index.css';    // 把样式引入
Vue.use(ElementUI);

1.3、这样就可以在单页面组件中使用element-ui了

官方文档 https://element.eleme.cn/#/zh-CN/component/quickstart
参考文档：看到好看的样式，直接复制

以登录界面结合element-ui的使用

单页面组件页面的代码

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16" :offset="6">
        <div class="grid-content bg-purple">
          <h1>登录页面</h1>
          <br>
          <el-row>
            <el-input v-model="username" placeholder="请输入用户名"></el-input>
            <br>
            <br>
            <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
            <br>
            <br>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
          </el-row>

        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>


export default {
  name: 'HomeView',
  data() {
    return {
      username: '',
      password: '',
    }
  },

}
</script>


<style>
/* 下面的是页面布局的样式  */
.el-row {
  margin-bottom: 20px;

&
:last-child {
  margin-bottom: 0;
}

}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

main.js 文件的代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


Vue.config.productionTip = false

//elementui 的引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

效果展示

二、状态管理器(vuex)

2.1、vuex的使用

2.1.1、概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.1.2、何时使用？

多个组件需要共享数据时

2.1.3、vuex环境

在项目的src文件夹下的store文件夹下的index.js文件里面

2.1.4、vuex的三种使用方式

vuex的代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        num: 10
    },
    mutations: {
        // mutations 写函数的功能
        mAdd(state, count) {
            console.log(state)
            console.log(count)
            state.num = state.num + count
        },
    },
    actions: {
        // 至少要有一个参数，context上下文对象,触发mutations中函数执行，或者直接改state中数据都可以
        add(context, count) {
            // 使用commit，触发mutations中得函数
            console.log(context)
            console.log(count)
            context.commit('mAdd', count)  // 会触发mutations中得mAdd的执行
        },
    },
})

页面组件的代码

直接操作

<template>
  <div>
  <h1>vuex的使用</h1>
    购物车商品数量：{{this.$store.state.num}}
    <button @click="handclick">点击我增加数据</button>
  </div>
</template>


<script>


export default {
  name: 'HomeView',
  methods: {
    handclick(){
      // 1、直接操作
      this.$store.state.num +=1
    },
  },

}
</script>

<style>

</style>

正统方式

<template>
  <div>
  <h1>vuex的使用</h1>
    购物车商品数量：{{this.$store.state.num}}
    <button @click="handclick">点击我增加数据</button>
  </div>
</template>


<script>


export default {
  name: 'HomeView',
  methods: {
    handclick(){
      // 2、正统方式
      // add 必须是action中得函数
      this.$store.dispatch('add', 2)
    },
  },

}
</script>

<style>

</style>

直接操作mutations

<template>
  <div>
  <h1>vuex的使用</h1>
    购物车商品数量：{{this.$store.state.num}}
    <button @click="handclick">点击我增加数据</button>
  </div>
</template>


<script>


export default {
  name: 'HomeView',
  methods: {
    handclick(){
      // 3、直接操作mutations
      this.$store.commit('mAdd', 3)
    },
  },

}
</script>

<style>
</style>

实现的效果

三、router使用（重点）

提倡单页面应用，需要做页面的跳转----》借助于Router实现页面组件的跳转

3.1、路由创建的三种方式

3.1.1、简单的路由创建和使用

步骤：
创建一个新的页面组件在views文件夹下面创建
在router—>index.js—>routes数组中加入一个路由即可

实现效果

3.1.2、组件中实现页面跳转

-两种方式
	-方式一：使用 router-link 标签，to 地址
     	<router-link to="/about"></router-link>
	-方式二：js控制
    	this.$router.push('/about')

方式一:使用 router-link 标签，to 地址

单页面组件的代码：

<template>
  <div>
    <h1>我是首页</h1>
    <p>只要是在router-link标签下的内容都会被点击跳转到to指定的页面如：按钮、文本内容、图片</p>
    <router-link to="/about">
      <button>点击跳转到about路径下</button>
      <p>文本内容</p>
      <img src="https://img2.woyaogexing.com/2021/09/22/d9e5c102207f490b883e034db8657244!400x400.jpeg" alt=""
           height="200px">
    </router-link>
  </div>
</template>


<script>


export default {
  name: 'HomeView',
  methods: {},
}
</script>


<style>


</style>

要跳转到的单页面组件的页面代码：

<template>
<div>
  <h1>我是about页面</h1>
</div>
</template>

<script>
export default {
  name: "AboutView"
}
</script>

<style scoped>

</style>

实现效果

跳转之后的页面

方式二：js控制

单页面组件的代码：

<template>
  <div>
    <h1>我是首页</h1>
    <br>
    <br>
    <br>
    <button @click="clickGo">js控制跳转到about</button>
    <br>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  methods: {
    clickGo() {
      this.$router.push('/about')
    }
  }
}
</script>

<style>
</style>

要跳转到的单页面组件的页面代码：

<template>
<div>
  <h1>我是about页面</h1>
</div>
</template>

<script>
export default {
  name: "AboutView"
}
</script>

<style scoped>
</style>

实现效果

跳转之后的页面

3.1.3、组件中实现页面跳转之对象属性

3.1.3.1、通过对象跳转路由name形式：

 通过对象跳转路由name形式： <router-link :to="{name:'about'}">

<template>
  <div>
    <h1>我是首页</h1>
    <p>to标签可放对象</p>
    <!--   to前面加冒号然后用字典的形式填写to的k和v的值，这里的k和v的值是路由里面的kv键值对， -->
    <router-link :to="{name:'about'}">
      <button>点击跳转到about路径下</button>
      <p>文本内容</p>
      <img src="https://img2.woyaogexing.com/2021/09/22/d9e5c102207f490b883e034db8657244!400x400.jpeg" alt=""
           height="200px">
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  methods: {}
</script>

<style>
</style>

3.1.3.2、通过对象跳转路由path形式：

通过对象跳转路由path形式： ‘<router-link :to="{path:'/about'}">’

<template>
  <div>
    <h1>我是首页</h1>
    <p>to标签可放对象</p>
    <!--   to前面加冒号然后用字典的形式填写to的k和v的值，这里的k和v的值是路由里面的kv键值对， -->
    <router-link :to="{path: '/about'}">
      <button>点击跳转到about路径下</button>
      <p>文本内容</p>
      <img src="https://img2.woyaogexing.com/2021/09/22/d9e5c102207f490b883e034db8657244!400x400.jpeg" alt=""
           height="200px">
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  methods: {}
</script>

<style>
</style>

3.1.3.3、对象中可以有query属性，是个对象类型，会把里面的key-value拼到路径后面

# 这两种写法一样
<router-link to="/about?name=lqz&age=19">
<router-link :to="url_obj">

单页面组件的代码：

<template>
  <div>
    <h1>我是首页</h1>
    <p>to标签可放对象</p>
    <!--   to前面加冒号然后用字典的形式填写to的k和v的值，这里的k和v的值是路由里面的kv键值对， -->
<!-- 对象中可以有query属性，是个对象类型，会把里面的key-value拼到路径后面   -->
<!--    <router-link to="/about?name=lqz&age=19">-->
    <router-link :to="url_obj">

      <button>点击跳转到about路径下</button>
      <p>文本内容</p>
      <img src="https://img2.woyaogexing.com/2021/09/22/d9e5c102207f490b883e034db8657244!400x400.jpeg" alt=""
           height="200px">
    </router-link>
  </div>
</template>


<script>
export default {
  name: 'HomeView',
  data() {
    return {
      url: '/about',
      url_obj: {
        path: '/about', query: {
          id: 1,
          age: 19
        }
      }
    }
  },
  
</script>

<style>
</style>

要跳转到的单页面组件的页面代码：

<template>
  <div>
    <h1>我是about页面</h1>
  </div>
</template>

<script>
export default {
  name: "AboutView",
  created() {
    console.log(this.$route) // 对象，表示当前路由对象，里面有当前路径的地址，携带的参数。。。
    console.log(this.$router) // 对象，new VueRouter的对象，它主要用来做路由跳转
    // 地址栏中的数据
    console.log(this.$route.query)
  }
}
</script>

<style scoped>

</style>

console.log(this.$route)   // 对象，表示当前路由对象，里面有当前路径的地址，携带的参数。。。
console.log(this.$router)  // 对象，new VueRouter的对象，它主要用来做路由跳转
console.log(this.$route.query)  // 地址栏中的数据
# 这三行打印的是下面的图片的结果

展示

3.1.3.4、在另一个页面中取出地址栏中数据：console.log(this.$route.query)

要跳转到的单页面组件的页面代码：

<template>
  <div>
    <h1>我是about页面</h1>
  </div>
</template>

<script>
export default {
  name: "AboutView",
  created() {
    console.log(this.$route) // 对象，表示当前路由对象，里面有当前路径的地址，携带的参数。。。
    console.log(this.$router) // 对象，new VueRouter的对象，它主要用来做路由跳转
    console.log(this.$route.query)   // 地址栏中的数据
  }
}
</script>

<style scoped>

</style>

    注意区分：
    	this.$route：当前路由对象，当前路径，取传递数据。。。
        this.$router：整个路由对象，主要做跳转用

3.1.3.5、这种传递方式和 3的方式一样

这种传递方式和 3  一样  <router-link to="/about?name=lqz&age=19">

<template>
  <div>
    <h1>我是首页</h1>
    <p>to标签可放对象</p>
    <!--   to前面加冒号然后用字典的形式填写to的k和v的值，这里的k和v的值是路由里面的kv键值对， -->
    <!-- 对象中可以有query属性，是个对象类型，会把里面的key-value拼到路径后面   -->
    <!-- <router-link :to="url_obj"> -->
    <router-link to="/about?name=lqz&age=19">

      <button>点击跳转到about路径下</button>
      <p>文本内容</p>
      <img src="https://img2.woyaogexing.com/2021/09/22/d9e5c102207f490b883e034db8657244!400x400.jpeg" alt=""
           height="200px">
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      url: '/about',
      url_obj: {
        path: '/about', query: {
          id: 1,
          age: 19
        }
      }
    }
  },
</script>

<style>
</style>

3.1.3.6、路径中分割出参数

路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

// 导入创建的单页面组件
import AboutView from "@/views/AboutView.vue";
import DetailView from "@/views/DetailView.vue";

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView,
    },
    //  注册新建的单页面组件的路由
    {
        path: '/about',
        name: 'about',
        component: AboutView,
    },
    {
        path: '/detail/:pk',
        name: 'detail',
        component: DetailView
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

单页面组件的代码：

<template>
  <div>
    <h1>我是首页</h1>
    <br>
    <br>
    <h1>路径中分割出 参数</h1>
    <router-link :to="{name:'detail',params:{pk:88}}">
      <button>跳转到detail</button>
    </router-link>

  </div>
</template>

<script>
export default {
  name: 'HomeView',
  },

</script>

<style>
</style>

要跳转到的单页面组件的页面代码：

<template>
  <div>
    <h1>详情</h1>
  </div>
</template>

<script>
export default {
  name: "DetailView"
}
</script>

<style scoped>

</style>

效果展示

3.1.4、总结：

# 提倡单页面应用，需要做页面的跳转----》借助于Router实现页面组件的跳转


# 1 简单使用
	-页面跳转（咱们之前学过了）
    -写个页面组件
    -在router--->index.js--->routes数组中加入一个路由即可
    
# 2 组件中实现页面跳转
	-两种方式
    	-方式一：使用 router-link 标签，to 地址
         	<router-link to="/about"></router-link>
		-方式二：js控制
        	this.$router.push('/about')
            
            
            
# 3 路由跳转时，可以使用对象
	-1  通过对象跳转路由name形式： <router-link :to="{name:'about'}">
	-2 通过对象跳转路由path形式： <router-link :to="{path:'/about'}">
    -3 对象中可以有query属性，是个对象类型，会把里面的key-value拼到路径后面
    -4 在另一个页面中取出地址栏中数据：console.log(this.$route.query)
    -5 这种传递方式和 3  一样 <router-link to="/about?name=lqz&age=19">
    -6 注意区分：
    	this.$route：当前路由对象，当前路径，取传递数据。。。
        this.$router：整个路由对象，主要做跳转用
        
    -7 路径中分割出 参数
    	-配置：    
        	{
            path: '/detail/:pk',
            name: 'detail',
            component: DetailView
        	},
        -在路由中取：
        	this.$route.params.pk
            
    -8 路由跳转时，使用 7 的样子
    	-this.$router.push({name: 'detail', params: {pk: 999}})
        -<router-link :to="{name:'detail',params:{pk:88}}">
        
        
 # 4 this.router 的一些方法
    this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
    this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
    this.$router.back(): 请求(返回)上一个记录路由
    this.$router.go(-1): 请求(返回)上一个记录路由
    this.$router.go(1): 请求下一个记录路由

3.1、多级路由

# 使用步骤：
	- 1 新建一个页面组件（LqzView），配置路由
    	  {
            path: '/lqz',
            name: 'lqz',
            component: LqzView,
        },
    -2 在页面中，想再显示页面组件，实现点击切换的效果
    	   <h1>lqz页面</h1>
            <router-link to="lqz01">
              <button>lqz-01</button>
            </router-link>
            <router-link to="lqz02">
              <button>lqz-02</button>
            </router-link>

            <router-view>
            # 以后这里变换页面组件，多级路由
            </router-view>
    -3 新建两个页面组件，Lqz01.vue，Lqz02.vue，配置路由children
        {
            path: '/lqz',
            name: 'lqz',
            component: LqzView,
            children: [ //通过children配置子级路由
                {
                    path: 'lqz01', //此处一定不要写：/news
                    component: Lqz01
                },
                {
                    path: 'lqz02',//此处一定不要写：/message
                    component: Lqz02
                }
            ]
        },

案列演示：
创建3个单页面组件，LqzView.vue、Lqz01.vue、Lqz02.vue，Lqz01.vue和Lqz02.vue用来做跳转路由用的。

路由配置的代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

// 导入创建的单页面组件

import LqzView from "@/views/LqzView.vue";
import Lqz01 from "@/views/lqz/Lqz01.vue";
import Lqz02 from "@/views/lqz/Lqz02.vue";


Vue.use(VueRouter)

const routes = [
    {
        path: '/lqz',
        name: 'lqz',
        component: LqzView,
        children: [ //通过children配置子级路由
            {
                path: 'lqz01', //此处一定不要写：/news
                component: Lqz01
            },
            {
                path: 'lqz02',//此处一定不要写：/message
                component: Lqz02
            }
        ]
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

LqzView.vue文件的代码

<template>
  <div>
    <h1>lqz页面</h1>
    <router-link to="lqz01">
      <button>lqz-01</button>
    </router-link>
    <router-link to="lqz02">
      <button>lqz-02</button>
    </router-link>

    <router-view>
      # 以后这里变换页面组件，多级路由
    </router-view>
  </div>
</template>

<script>
export default {
  name: "LqzView"
}
</script>

<style scoped>

</style>

Lqz01.vue和Lqz02.vue文件的代码

######################## Lqz01.vue文件的代码  
<template>
  <div>
    <h1>这个是lqz01页面</h1>
  </div>
</template>

<script>
export default {
  name: "Lqz01"
}
</script>

<style scoped>

</style>




####################################################Lqz02.vue文件的代码  
<template>
  <div>
    <h1>这个是lqz02页面</h1>
  </div>
</template>

<script>
export default {
  name: "Lqz02"
}
</script>

<style scoped>

</style>

效果展示

3.2、路由守卫

写在router-index.js中，以后访问任意一个路由，都会执行这个代码

# 前置路由守卫，再进入路由之前做判断
# 写在router-index.js中，以后访问任意一个路由，都会执行这个代码
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)
    // 要是访问lqz01，都不能跳转'
    // 如果没有登录，不能访问
    if (to.path == '/lqz/lqz01') {
        alert('你灭有权限')
    } else {
        next()
        // 继续访问
    }
})

展示效果

四、路由的两种工作模式

'''
路由器的两种工作模式
1 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
2 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
3 hash模式：
    地址中永远带着#号，不美观 。
    若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
    兼容性较好。
4 history模式：
    地址干净，美观 。
    兼容性和hash模式相比略差。
    应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

5 修改路由器的两种工作模式在 src的router的index.js文件中的 router的变量里面修改
const router = new VueRouter({
    mode: 'history',   // 修改 mode的值
    base: process.env.BASE_URL,
    routes
})


'''

四、localstorage和sessionstorage,和cookie

'''
# 前端存储数据
	- 登录成功，有token，存本地
    - 不登陆加购物车
    
# 前端可以存数据的位置：
	localstorage：永久存储，除非你删除，关闭浏览器，再打开还会在
    sessionstorage：只在当前会话生效，关闭浏览器，就没了
    cookie：有过期时间，到了过期时间，自动删除
    
# 操作这三个位置

1、操作cookie时需要第三方模块使用
      // 需要借助于第三方  vue-cookies
      // cnpm install -S vue-cookies
2、在main.js文件中导入模块
// 使用vue-cookies
import cookies from 'vue-cookies'
Vue.use(cookies)

3、这样就可以在单页面组件中使用

'''

单页面组件的代码

<template>
  <div>
    <h1>操作localstorage,永久存储</h1>
    <button @click="addLocalstorage">增加</button>
    <button @click="getLocalstorage">查</button>
    <button @click="deleteLocalstorage">删除</button>
    <br>
    <br>
    <br>
    <h1>操作sessiostorage,当前会话，关闭浏览器</h1>
    <button @click="addSessiostorage">增加</button>
    <button @click="getSessiostorage">查</button>
    <button @click="deleteSessiostorage">删除</button>
    <br>
    <br>
    <br>
    <h1>操作cookie,有过期时间, 需要借助于第三方模块</h1>
    <button @click="addCookie">增加</button>
    <button @click="getCookie">查</button>
    <button @click="deleteCookie">删除</button>

  </div>
</template>


<script>


export default {
  name: 'HomeView',
  methods: {
    // 操作localstorage
    addLocalstorage() {
      var userinfo = {name: 'lqz', age: 19}
      localStorage.setItem('userinfo', JSON.stringify(userinfo))
    },

    getLocalstorage() {
      var userinfo = localStorage.getItem('userinfo')
      // console.log(JSON.parse(userinfo).name)
      console.log(JSON.parse(userinfo))
    },

    deleteLocalstorage() {
      localStorage.clear()
      localStorage.removeItem('userinfo')
    },

    // 操作sessiostorage
    addSessiostorage() {
      var userinfo = {name: '彭于晏', age: 19}
      sessionStorage.setItem('userinfo', JSON.stringify(userinfo))

    },
    getSessiostorage() {
      var userinfo = sessionStorage.getItem('userinfo')
      console.log(JSON.parse(userinfo).name)

    },
    deleteSessiostorage() {
      sessionStorage.clear()
      sessionStorage.removeItem('userinfo')

    },

    //
    addCookie() {
      // 需要借助于第三方  vue-cookies
      // cnpm install -S vue-cookies
      this.$cookies.set('name', '刘亦菲', '300s')

    },
    getCookie() {
      console.log(this.$cookies.get('name'))

    },
    deleteCookie() {
      this.$cookies.remove('name')

    },


  },
}
</script>


<style>
</style>

main.js文件的代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


Vue.config.productionTip = false

//elementui 的引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// 使用vue-cookies
import cookies from 'vue-cookies'
Vue.use(cookies)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')