1 vue-router使用
1.1 路由跳转
1.2 相关api
1.3 页面跳转,携带数据
1.4 多级路由
1.5 路由守卫
1.6 路由器的两种工作模式
2 localStorage、sessionStorage、cookie
3 vue3介绍
4 组合式api和配置项api
1 vue-router使用
-以后,就是组件的切换实现页面切换的效果---》必须借助于vue-router来实现
-vuex 现在知道的
-<router-view/>---》显示组件---》router/index.js中配置
-<router-link :to="about_url"> ---》做 页面组件跳转的
-1 基本使用
-写一个页面组件
-配置访问某个路径显示这个页面组件
1.1 路由跳转
# 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'})
<template>
<div class="home">
<h1>首页</h1>
<button @click="handleClick">点我跳到about</button>
<br>
<router-link to="/about">
<button>点我跳到about---->标签的跳转</button>
</router-link>
<br>
<router-link :to="about_url">
<button>点我跳到about---->标签的跳转</button>
</router-link>
</div>
</template>
<script>
export default {
name: 'HomeView',
data(){
return{
// about_url: '/about'
// 或者放对象之name
// about_url: {name: 'about'}
// 对象之path
about_url: {path: '/about'}
}
},
methods: {
handleClick() {
// 方式1:直接放地址形式
// this.$router.push('/about')
// 方式2:放对象形式
// this.$router.push({name: 'about'})
this.$router.push({path: '/about'})
}
}
}
</script>
1.2 相关api
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由
//replace的使用
this.$router.replace({name: 'about'})
this.$router.back()
this.$router.go(1)
1.3 页面跳转,携带数据
# 方式一:地址中携带 ? 后带
跳转的时候:
-标签跳转:
<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/lin">
<router-link :to="{name:userinfo,params:{id:88,name:lin}}">
-js跳转
this.$router.push("/userinfo/88/lin")
this.$router.push({name:userinfo,params:{id:88,name:lin}})
取值的时候:
this.$route.params.id
<router-link to="/userinfo?user_id=1">
<button>点我跳转到userinfo,鞋带用户id</button>
</router-link>
--------------------------------------------------------------------------
<template>
<div class="home">
<h1>用户详情</h1>
{{user_id}}
</div>
</template>
<script>
export default {
name: 'UserDetail',
data(){
return{
user_id: ''
// 也可以不用写在created(){}
// user_id: this.$route.query.user_id
}
},
created() {
// this.$route 代指当前路由对象
// console.log(this.$route)
// this.$route.query 代指当前路由对象传递的参数,也就是指 ? 后的
this.user_id = this.$route.query.user_id
}
}
</script>
1.改变路由
{
// path: '/userinfo',
path: '/userinfo/:id/:lin',
name: 'userinfo',
component: UserDetail
}
2.组件中
<router-link to="/userinfo/88/lin">
<button>点我跳转到userinfo,鞋带用户id</button>
</router-link
<br>
<button @click="handleClick2()">js跳转,点我跳转到userinfo?携带用户id</button>
---------------------------------------------------------------------------
handleClick2(){
// this.$router.push('/userinfo/99/lin')
// 或者
this.$router.push({
name: 'userinfo',
// params: {id: 99, name: 'lin'},
// 或者
query: {id: 99, name: 'lin'}
})
}
-------------------------------------------------------------------------
data(){
return{
user_id: ''
}
},
created() {
this.user_id = this.$route.params.id
}
1.4 多级路由
# 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
1.HomeView
<template>
<div class="home">
<div class="head">头部标题</div>
<div class="main">
<el-row :gutter="20">
<el-col :span="4">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<router-link to="/index">
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span slot="title">首页</span>
</el-menu-item>
</router-link>
<router-link to="/order">
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">订单</span>
</el-menu-item>
</router-link>
<el-menu-item index="3">
<i class="el-icon-menu"></i>
<span>商品</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-menu"></i>
<span slot="title">导航四</span>
</el-menu-item>
<el-menu-item index="5">
<i class="el-icon-menu"></i>
<span slot="title">导航五</span>
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="20">
<div class="right">
<router-view/>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
<style>
.head {
height: 30px;
text-align: center;
background-color: aqua;
}
.left {
background-color: bisque;
height: 300px;
}
.right {
background-color: aquamarine;
height: 300px;
}
</style>
2.建page文件夹下的IndexView
<template>
<div class="home">
<h1>我是首页</h1>
</div>
</template>
<script>
export default {
name: 'IndexView',
}
</script>
1.5 路由守卫
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 || 'lin系统'
})
1.6 路由器的两种工作模式
1 对于一个url来说,什么是hash值?—— # 及其后面的内容就是hash值。
2 hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
3 hash模式:
地址中永远带着#号,不美观 。
若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
兼容性较好。
4 history模式:
地址干净,美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题
2 localStorage、sessionStorage、cookie
# 前端存储数据,可以存在哪?
-可以放到cookie中,cookie有过期时间,一旦过期就清理了
-可以放到localStorage,永久存储,除非使用代码删除,清理浏览器
-可以存到sessionStorage,关闭浏览器就没了
# 不登录加购物车
# localStorage
# sessionStorage
# cookie
# 用户登录状态----》token串--->cookie中
------------------------------------------------------------------------
1.安装cookie
npm install vue-cookies --save
2.在main.js中引用cookie
import Vue from 'vue';
import VueCookies from 'vue-cookies';
Vue.use(VueCookies);
<template>
<div class="home">
<h1>首页</h1>
<button @click="saveLocalStorage">写入数据到localStorage</button>
<button @click="getLocalStorage">读取localStorage数据</button>
<button @click="deleteLocalStorage">删除localStorage数据</button>
<br>
<button @click="saveSessionStorage">写入数据到sessionStorage</button>
<button @click="getSessionStorage">读取sessionStorage数据</button>
<button @click="deleteSessionStorage">删除sessionStorage数据</button>
<br>
<button @click="saveCookies">写入数据到Cookies</button>
<button @click="getCookies">读取getCookies数据</button>
<button @click="deleteCookies">删除deleteCookies数据</button>
</div>
</template>
<script>
export default {
name: 'HomeView',
methods: {
saveLocalStorage() {
// 保存对象?
// 这是一个坑,需要存放json格式的字符串
let userinfo = {name: 'lin', age: 19}
localStorage.setItem('userinfo', JSON.stringify(userinfo))
// localStorage.setItem('name', 'lin')
},
getLocalStorage() {
let res = JSON.parse(localStorage.getItem('userinfo'))
console.log(res)
},
deleteLocalStorage() {
// 全删
// localStorage.clear()
// 执定删除
localStorage.removeItem('username')
},
saveSessionStorage(){
// 保存对象?
// 这是一个坑,需要存放json格式的字符串
let userinfo = {name: 'lin', age: 19}
sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
// localStorage.setItem('name', 'lin')
},
getSessionStorage(){
let res = JSON.parse(sessionStorage.getItem('userinfo'))
console.log(res)
},
deleteSessionStorage(){
// 全删
sessionStorage.clear()
// 执定删除
// sessionStorage.removeItem('username')
},
// cookie------>js操作-----》借助于第三方vue-cookie,操作cookie
saveCookies(){
this.$cookies.set('name', 'lin')
},
getCookies(){
console.log(this.$cookies.get('name'))
},
deleteCookies(){
this.$cookies.remove('name')
},
}
}
</script>
3 vue3介绍
1.tree-shaking是一种消除死代码的性能优化理论
2.TypeScript
-javascript:坑---》填坑---》弱类型
-typeScript:强类型语言
4 组合式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)
}