526互联

Vue-router、localStorange

发布时间 2023-10-08 19:06:07作者: Way*yy

Vue-Router的使用

作用：
	借助于router可以实现单页面组件之间的跳转

this.router的一些使用方法：
    this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
    this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
    this.$router.back(): 请求(返回)上一个记录路由
    this.$router.go(-1): 请求(返回)上一个记录路由
    this.$router.go(1): 请求下一个记录路由
        
基本使用：
    -1、页面之间的跳转
    -2、在router文件夹----->index.js----->router数组中加入路由即可

路由跳转

1、html中通过标签跳转：
	需要使用router-link：
    -1、使用普通属性
        <router-link to="/about"><button>点我跳转到关于页面</button></router-link>
    -2、使用属性指令：
    	<router-link :to="about_urls"><button>点我跳转到关于页面</button></router-link>
         data() {
            return {
                about_urls: "/about"
            }
2、通过使用JS来绑定：
  # 方式一：
     <button @click="abouts">点我跳转到关于页面</button>
   	 JS：
        methods: {
        abouts() {
          this.$router.push('/about')
        }
      # 方式一：直接放地址形式
      	this.$router.push('/about')
      # 方式二：对象形式
      	this.$router.push({name: 'about'})
      	this.$router.push({path: '/about'})

页面跳转，携带数据

# 方式一：在地址中携带 "?" 后面
  标签跳转：
    <router-link to="/userinfo?user_id=9"><button>点我传递参数</button></router-link>
    <hr>
    <router-link :to="{name: 'userinfo', query: {user_id: 99}}"><button>点我传参数</button></router-link>
  JS跳转：
    <button @click="routerss">点我携带数据跳转</button>
    <button @click="routes">点我携带数据跳转</button>
取值的时候：
	this.$route.query.user_id
    
# 方式二：127.0.0.1:8000/xxxx/mmmmmm类型：
  	配置路由：
        {
        path: '/userinfo/:id/:name',
        name: 'userinfo',
        component: UserDetail
   	 },
	跳转的时候： 
    	-标签跳转： 
        	<router-link to="/userinfo/88/lqz">
            <router-link :to="{name:userinfo,params:{id:88,name:lqz}}">
        -js跳转
            this.$router.push("/userinfo/88/lqz")
            this.$router.push({name:userinfo,params:{id:88,name:lqz}})
            
   取值的时候：
		this.$route.params.id

代码

<template>
  <div>
    <h1>这是首页</h1>
    <router-link to="/about">
      <button>点我跳转到关于页面</button>
    </router-link>
    <hr>
    <button @click="abouts">点我跳转到关于页面</button>
    <hr>
    <h1>地址中携带数据</h1>
    <router-link to="/userinfo?user_id=9">
      <button>点我传递参数</button>
    </router-link>
    <hr>
    <router-link :to="{name: 'userinfo', query: {user_id: 99}}">
      <button>点我传参数</button>
    </router-link>
    <hr>
    <h1>使用JS跳转</h1>
    <button @click="routerss">点我携带数据跳转</button>
    <hr>
    <button @click="routes">点我携带数据跳转</button>
  </div>
</template>

<script>

export default {
  name: "HomeView",
  data() {
    return {}
  },
  methods: {
    abouts() {
      this.$router.push('/about')
    },
    routerss() {
      this.$router.push('/userinfo?user_id=78')
    },
    routes() {
      this.$router.push({name: 'userinfo', query: {"user_id": '100'}})
    }
  }
}
</script>

多级路由

# 1 新建一个首页HomeView，一个IndexView和OrderView
	-构建出骨架，以后想点击只有这个位置变，就放一个 <router-view/>
    
   	-IndexView和OrderView正常写
    
# 2 定义多级路由
	 {
        path: '/',
        name: 'home',
        component: HomeView,
        children: [ //通过children配置子级路由
            {
                path: 'index', //此处一定不要写：/news
                component: IndexView
            },
            {
                path: 'order',//此处一定不要写：/message
                component: OrderView
            }
        ]
    },
    
# 3 路由跳转：js，html

路由守卫

router.beforeEach((to, from, next) => {
    // to 去哪个路由-->对象
    // from 从哪来--->对象
    // next()--->跳过去了
    console.log('前置路由守卫', to, from)
    console.log(to)
    next()

})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
    console.log('后置路由守卫', to, from)
    document.title = to.meta.title || 'lqz系统'
})

路由器的两种工作模式

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

localStorage系列

前段存储数据可以存在哪里？
    -1、可以存在cookie中，但是cookie有过期时间，一旦过期就会立即清除掉数据
    -2、可以存在localStorage中，永久存储，除非使用代码删除或者清除浏览器
    -3、可以存到sessionStorage中，关闭浏览器数据销毁

保存数据 and 查看数据and 销毁数据

<template>
  <div>
    <h1>Local Storage</h1>
    <button @click="saveLocalStorage">保存</button>
    <button @click="getLocalStorage">查看</button>
    <button @click="deleteLocalStorage">删除</button>
    <hr>
    <h1>Session Storage</h1>
    <button @click="saveSession">保存</button>
    <button @click="getSession">查看</button>
    <button @click="deleteSession">删除</button>
    <hr>
    <h1>Coolie</h1>
    <button @click="saveCookie">保存</button>
    <button @click="getCookie">查看</button>
    <button @click="deleteCookie">删除</button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    saveLocalStorage() {
      let userinfo = {"username": "yang", "password": "123456"}
      localStorage.setItem('userinfo', JSON.stringify(userinfo))
    },
    getLocalStorage() {
      let res = JSON.parse(localStorage.getItem("userinfo"))
      console.log(res)
    },
    deleteLocalStorage() {
      localStorage.clear()
      localStorage.removeItem("username")
    },
    saveSession() {
      let userinfo = {"username": "yang", "password": "123456"}
      sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
    },
    getSession() {
      let res = JSON.parse(sessionStorage.getItem("userinfo"))
      console.log(res)
    },
    deleteSession() {
      sessionStorage.clear()
      sessionStorage.removeItem("username")
    },
    saveCookie() {
      // 使用之前需要先安装npm install vue-cookies --save
      // 在main.js中导入
      // import Vue from 'vue'
      // import VueCookies from 'vue-cookies'
      // Vue.use(VueCookies)
      this.$cookies.set('username', 'yang')
    },
    getCookie() {
      console.log(this.$cookies.get('username'))
    },
    deleteCookie() {
      this.$cookies.remove('username')
    },
  }
}
</script>

Vue3的介绍

# tree-shaking是一种消除死代码的性能优化理论
# TypeScript 
	-javascript:坑---》填坑---》弱类型
    -typeScript：强类型语言

组合式api和配置项api

# vue3 兼容vue2---》vue2的内容，vue3完全适用
# vue3 不建议这么用了,建议使用组合式api，不建议使用配置项api
	data(){}
    mehtods:{}
        
        
        
 # 配置项api定义一个组件
	export default {
        data(){
            name:ss
        }
    	mehtods:{
            console.log(name)
        }
    }
    
 # 组合式api
	setup{
        var name =ss
        console.log(name)
    }