一、路由的使用
以后，就是组件的切换实现页面切换的效果 -----》 必须借助于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>