一、路由的使用
以后，就是组件的切换实现页面切换的效果 -----》 必须借助于vue-router来实现。
在App.vue中：
<router-view/> ---> 显示组件 ---> 在router/index.js中配置
<router-link :to="about_url"> ----> 做页面组件的跳转的
基本使用：
1. 写一个页面组件
2. 配置访问某个路径显示这个页面组件
1. 路由跳转
先在router/index.js中配置路由
1.1 html 中通过标签跳转
使用<router-link></router-link>进行跳转
- <router-link :to="about_url">
<button>点我调到about-->标签的跳转</button>
</router-link>
- <router-link to="/about">
<button>点我调到about-->标签的跳转</button>
</router-link>
使用如下：
结果：
当点击时，都会跳到About组件的页面
1.2 js中控制页面跳转
在script中通过：this.$router.push进行页面的跳转
template中：
script中：
结果：
当点击按钮时，会直接跳转到About组件页面
2. 相关API
this.$router.push(path)：相当于点击路由链接（路由返回当前的路由界面）
this.$router.replace(path)：用新路由替换当前路由（但是不可以返回到前期路由界面 ）
例如：
从跟路由跳转到about下：
结果：
点击前：
点击后：
this.$router.back()：请求返回上一个记录路由（相当于网页上面的后退箭头）
this.$router.go(-1)：请求返回上一个记录路由（和back作用一样）
this.$router.go(1)：请求下一个记录路由
3. 页面跳转，携带数据
方式一： 在路由地址中通过 ：？携带参数
1. 配置路由：
2. 跳转：
- 1. 标签跳转：
<router-link to="/userinfo?user_id=9">
<router-link :to="{name:userinfo,query:{user_id:88}}">
例如：
结果：
-2. js跳转
结果：
方式二：/xx/:id/:name
1, 配置路由：
{
path: '/info/:id/:name' ,
name: 'info',
component: User
}
2 .跳转
- 标签跳转
- js跳转
4. 多级路由
1. 新建一个首页HomeView，一个IndexView和OrderView
-
二、路由守卫
前置路由守卫，再进入路由之前做判断
写在router-index.js中，以后访问任意一个路由，都会执行这个代码
router.beforeEach((to, from, next) => {
console.log('前置路由守卫', to, from)
// 要是访问lqz01，都不能跳转'
// 如果没有登录，不能访问
if (to.path == '/lqz/lqz01') {
alert('你灭有权限')
} else {
next() # 继续访问
}
1. 路由器的两种工作模式
1. 对于一个url来说，什么是hash值？
#号及其后面的内容就是hash值
2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器
3. hash模式：
地址中永远带着#号，不美观。
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
兼容性较好
4. history模式：
地址干净，美观。
兼容性和hash模式相比略差
应用部署上线时，需要后端人员支持，解决刷新页面服务端404的问题
三、localStorage系列
前端存储数据，可以存在哪？
- 可以放到cookie中，cookie有过期时间，一旦过期就清理了（登录成功，有token，就存本地）
- 可以放到localStorage，永久存储，除非使用代码删除，清理浏览器（可以实现不登录加购物车）
-可以存到sessionStorage，关闭浏览器就没了
<template>
<div class="home">
<h1>操作localstorage,永久存储</h1>
<button @click="addLocalstorage">增加</button>
<button @click="getLocalstorage">查</button>
<button @click="deleteLocalstorage">删除</button>
<h1>操作sessiostorage,当前会话，关闭浏览器</h1>
<button @click="addSessiostorage">增加</button>
<button @click="getSessiostorage">查</button>
<button @click="deleteSessiostorage">删除</button>
<h1>操作cookie,有过期时间</h1>
<button @click="addCookie">增加</button>
<button @click="getCookie">查</button>
<button @click="deleteCookie">删除</button>
</div>
</template>
<script>
export default {
name: 'HomeView',
methods: {
addLocalstorage() {
var userinfo = {name: 'lqz', age: 19}
localStorage.setItem('userinfo', JSON.stringify(userinfo))
},
getLocalstorage() {
var userinfo = localStorage.getItem('userinfo')
console.log(JSON.parse(userinfo).name)
},
deleteLocalstorage() {
localStorage.clear()
localStorage.removeItem('userinfo')
},
addSessiostorage() {
var userinfo = {name: '彭于晏', age: 19}
sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
},
getSessiostorage() {
var userinfo = sessionStorage.getItem('userinfo')
console.log(JSON.parse(userinfo).name)
},
deleteSessiostorage() {
sessionStorage.clear()
sessionStorage.removeItem('userinfo')
},
addCookie() {
// 需要借助于第三方 vue-cookies
// cnpm install -S vue-cookies
this.$cookies.set('name', '刘亦菲', '300s')
},
getCookie() {
console.log(this.$cookies.get('name'))
},
deleteCookie() {
this.$cookies.remove('name')
},
}
}
</script>
标签：Vue,name,localStorage,userinfo,跳转,router,路由,页面 From： https://www.cnblogs.com/Lucky-Hua/p/17734157.html