vue-router使用
vue-router使用
组件切换实现页面切换效果,需要借助vue-router来实现
1、简单使用
页面跳转,写一个页面组件
在router--->index.js---routes数组中加入一个路由即可
2、组件中实现页面跳转
两种方式
方式一:使用 router-link 标签,to 地址
<router-link to="/about"><button>点我调到about-->标签的跳转</button></router-link to="/about">
方式二:js控制
this.$router.push('/about')
能直接使用router的原因:router的index中导出router
main.js引入
路由跳转时,可以使用对象
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、注意区分(route和router):
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}}">
this.router 的一些方法
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/>
2、定义多级路由
component动态组件
{ path: '/', name: 'home', component: HomeView, children: [ //通过children配置子级路由 { path: 'index', //此处一定不要写:/news component: IndexView }, { path: 'order',//此处一定不要写:/message component: OrderView } ] },
路由守卫
全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用路由转换之前:
路由转换之后:
路由器的两种工作模式
1、 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。
2、 hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
3、hash模式:
地址中永远带着#号,不美观 。
若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
4、history模式:
地址干净,美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题
localStorage系列
前端存储数据,可以存在哪里?
可以放到cookie中,cookie有过期时间,一旦过期就清理了
可以放到localStorage,永久储存,除非使用代码删除,清理浏览器
可以存到sessionStorage中,关闭浏览器就没了
<template> <div> <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="savecookie">写入数据到cookie</button> <button @click="getcookie">读取cookie数据</button> <button @click="deletecookie">删除cookie数据</button> </div> </template> <script> export default { name: 'HomeView', data() { return {} }, methods: { 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') //固定写法$cookies }, getcookie() { console.log(this.$cookies.get('name')) }, deletecookie() { this.$cookies.remove('name') }, } } </script>