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)
}
