vue-router使用、localStorage系列、vue3介绍、组合式api和配置项api

vue-router使用

以后，就是组件的切换实现页面切换的效果===》必须借助于vue-router来实现

 

vuex 现在知道的

　　-<router-view/>---》显示组件---》router/index.js中配置
　　-<router-link :to="about_url"> ---》做 页面组件跳转的

基本使用

　　写一个页面组件

　　配置访问某个路径显示这个页面组件

路由跳转

# 1 html 中通过标签跳转
    <router-link :to="about_url">
      <button>点我调到about-->标签的跳转</button>
    </router-link>
    
     <router-link to="/about">
          <button>点我调到about-->标签的跳转</button>
      </router-link>
# 2 js 控制页面跳转
      // 方式一：直接放地址形式
      // this.$router.push('/about')
      // 方式二：对象形式
      // this.$router.push({name: 'about'})
      // this.$router.push({path: '/about'})

相关api

this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由

页面跳转

# 方式一：地址中携带 ? 后带
    跳转的时候： 
        -标签跳转： 
            <router-link to="/userinfo?user_id=9">
            <router-link :to="{name:userinfo,query:{user_id:88}}">
        -js跳转
            this.$router.push("/userinfo?user_id=9")
            this.$router.push({name:userinfo,query:{user_id:88}})
            
   取值的时候：
        this.$route.query.user_id
# 方法二：/xx/:id/:name
    配置路由：
        {
        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

多级路由

# 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系列

# 前端存储数据，可以存在哪？
    -可以放到cookie中，cookie有过期时间，一旦过期就清理了
    -可以当到localStorage，永久存储，除非使用代码删除，清理浏览器
    -可以存到sessionStorage，关闭浏览器就没了
    
# 不登录加购物车


    
# localStorage
# sessionStorage
# cookie


# 用户登录状态----》token串--->cookie中

<script>
saveLocalStorage() {
      // 保存对象呢？
      var userinfo = {'name': 'lqz', 'age': 19}
      localStorage.setItem('userinfo', JSON.stringify(userinfo))
    },
    getLocalStorage() {
      var res = JSON.parse(localStorage.getItem('userinfo'))
      console.log(res)
    },
    deleteLocalStorage() {
      localStorage.clear()
      localStorage.removeItem('username')
    },

    savesessionStorage() {
      // 保存对象呢？
      var userinfo = {'name': 'lqz', 'age': 19}
      sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
    },
    getsessionStorage() {
      var res = JSON.parse(sessionStorage.getItem('userinfo'))
      console.log(res)
    },
    deletesessionStorage() {
      sessionStorage.clear()
      sessionStorage.removeItem('username')
    },


    // cookie --->js操作---》借助于第三方，操作cookie
    savecookie() {
      // 保存对象呢？
      this.$cookies.set('name', 'lqz')
    },
    getcookie() {
      console.log(this.$cookies.get('name'))
    },
    deletecookie() {
      this.$cookies.remove('name')
    },
<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)
    }