526互联

vue之elementui使用， vuex使用， Router使用， localstorage和sessionstorage,和cookie

发布时间 2023-06-12 16:37:03作者: 岳宗柯

目录

一、elementui使用

网址：https://element.eleme.cn/#/zh-CN/component/installation

下载插件

cnpm isntall -S element-ui@2.9

vue界的ui库

Element Plus 经典中的经典，全面支持 Vue 3
Vant 3 - 有赞团队开源移动 UI 组件库，全面支持 Vue 3：https://vant-contrib.gitee.io/vant/#/zh-CN
TDesign - 鹅厂优质 UI 组件，配套工具完满，设计工整，文档清晰
Ant Design Vue - 阿里前端 UI 库，面向企业级中后台
iView：

二、vuex的使用

1.概念

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

2.何时使用？

多个组件需要共享数据时
image
image

3、使用步骤：

第一步：

state: {
    num:10
  },

第二步：

methods:{
    handleAdd(){
      // 1.直接操作
      // console.log('111')
      // this.$store.state.num+=1
      // 2.正统操作，通过dispatch触发actions
      this.$store.dispatch('add',2)   // add必须是actions里面的函数

    }
  }

第三步：

 actions: {
    // 至少要有一个参数，context上下文对象，触发mutations中的函数执行，或者直接改state中的数据都可以
    add(context,count){
      // 使用commit，触发mutations中的函数
      console.log(context)
      console.log(count)
      context.commit('mAdd',count)
    }
  },

第四步：

mutations: {
    mAdd(state,count){
      console.log(state)
      console.log(count)
      state.num = state.num+=count
    }
  },

三、Router使用

提倡单页面应用，需要做页面的跳转----》借助于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): 请求下一个记录路由

四、多级路由

使用步骤：
- 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
              }
          ]
      },

五、路由守卫和两种工作模式

路由守卫

前置路由守卫，再进入路由之前做判断
写在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的问题

六、localstorage和sessionstorage,和cookie

前端存储数据
- 登录成功，有token，存本地
- 不登陆加购物车

前端可以存数据的位置：

localstorage：永久存储，除非你删除，关闭浏览器，再打开还会在
sessionstorage：只在当前会话生效，关闭浏览器，就没了
cookie：有过期时间，到了过期时间，自动删除

都是在浏览器存储数据的--》存数据有什么用？

-登录成功 token存在本地
-不登录加入购物车功能，迪卡侬存在了localStorage中
-组件间通信----》 跨组件

localStorage

-永久存储，除非清空缓存，手动删除，代码删除
-localStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-localStorage.getItem('userinfo')
-localStorage.clear()  // 清空全部
-localStorage.removeItem('userinfo')

sessionStorage

-关闭浏览器，自动清理
-sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-sessionStorage.getItem('userinfo')
-sessionStorage.clear()  // 清空全部
-sessionStorage.removeItem('userinfo') 

-有过期时间，到过期时间自动清理
-借助于第三方 vue-cookies
-cookies.set('userinfo', JSON.stringify(this.userInfo))
-cookies.get('userinfo')
-cookies.delete('userinfo')