SPA
现在的应用都流行单页面，在用户通过某些操作后更改地址url后，动态的进行不同模版内容的无刷新切换，用户体验更好。
在vue中使用官方提供的vue-router来配置单页，通过url的变化，触发hashchange事件进行路由之间的切换（卸载和安装）
ajax请求，通过路由，页面不会整体重载
Router
基础
vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？
-
hash（mode默认），使用 URL hash 值来作路由。支持所有包括不支持 HTML5 History Api 的浏览器。直接使用a标签<a href="#/home"></a> -
history: 依赖H5 History API和服务器配置。【需要后端支持，后端需要配置】<router-link to=""> Vue提供，to跳转 </router-link> -
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。
-
使用步骤
-
安装
npm i vue-router -S -
在src目录下创建一个
router目录， 里面创建一个index.js文件 ， 这个目录是放router模块用的 -
在
index.js内引入第三方的依赖包, 并注册路由。分别引入自定义组件，为router实例做准备。import Vue from 'vue' import VueRouter from 'vue-router' 自定义组件引入 import Home from "../components/pages/Home"; import Category from "../components/pages/Category"; Vue.use( VueRouter ) //使用vue-router这个第三方插件注意：
import这个关键字要放在整个文件的上层 -
创建
router对象实例，并创建路由表，选取模式modeconst routes = [ { path: '/home', //当前路由路径 component: Home, // 当前路由对应组件 children:[{}], // 子路由 name, // 命令路由 redirect: '/home' // 重定向 }//每一个对象就是一个路由 ] const router = new VueRouter({ routes, //路由表 必写 mode: 'history' // 模式 }) -
导出router实例
export default router -
入口文件main.js中引入路由实例 router , 然后在根实例中注册
import router from './router/index.js' // index.js可以省略 new Vue({ router, render: (h) => App }).$mount('#app') -
路由展示区域
- 如果是根级路由， 那么我们放在
App.vue组件中,用router-view的组件展示。如果modeΪhistory模式，那么还需讲所有的a标签换成router-link to="xx"
<router-view /> - 如果是根级路由， 那么我们放在
-
当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上
const routes = [ { //我们要求这个路由的配置要放在路由表的最上方 path: '/', redirect: '/home' } ] -
业务： 错误路由匹配，
const routes = [ { path: '/', redirect: '/home' //重定向 }, ...... { path: '/error', component: Error }, { //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个 path: '**', redirect: '/error' } ] -
vue路由模式的确定
- 如果你使用的是 hash , 那么a标签就可以了、
- 如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件
- router-link 这个组件 身上必须要有一个 to 属性
-
二级路由
const routes = [ { path: '/shopcar', component: Shopcar, children: [ { path: 'yyb', //不写 / component: Yyb } ] } ]- 注意： 写好配置之后，不要忘记了， 在一级路由组件的
.vue文件中添加二级路由展示区域
-
命名路由
作用： 简写路径
{ path: '/shopcar', component: Shopcar, //子路由 children: [ { name: 'yyb' //命名路由 } }使用（.vue）
<router-link :to = "{name:'yyb'}"/> -
动态路由
-
路由传参
this.$route 里有 query 和 params 属性 -
路由接参
-
守卫
数据预载（数据获取）
两种方式：导航完成前获取，导航完成后获取
- 导航完成前
export default { created () { // 组件创建完后获取数据， // 此时 data 已经被 observed 了 this.fetchData() }, } 1.这里设置的必须为对象， next(vm=>{ Vue.set(vm.dataArrt,key,value) }) 2.next(vm=>{ vm.setData(vm.dataAttr,value) }) 路由懒加载
按需加载路由
- Vue异步组件
- webpack代码分割
const routerLayLoad=(ComName)=>{ @符号表示src目录 return imoprt() } 路由表内 const routes=[ { path:'', components:routerLayLoad( 'ComName ' ) } ] 杂碎
动画
别人给的六个类名+自己写c3、使用animate.css、八个动画钩子写、类库涡轮city，使用方式跟jquery一致
- 安装
npm i animate.css -S - main.js引入
import 'animate.css' - 在vue文件中用
transition包裹router-view。 transition标签添加enter-active-class="animated + 类"和leave-acitve-class="animated + 类"属性
main.js： import 'animate.css' vue文件： <transition enter-active-class="animated slideInLeft" leave-active-class="animated slideOutLeft" mode="out-in" name="router" > <router-view></router-view> </transition> 缓存
<router-link active-class="active" keep-alive class="nav-link" to="/home" > 首页 </router-link> 路由激活
- 在rout-link标签中添加
active-class属性，值为类名 - 写一个
active的样式
<router-link active-class="active" class="nav-link" to="/home">首页</router-link> <style> .active{ color:rosybrown; } </style> 滚动行为
官网中的滚动行为不好用
router实例中scrollBehavior中的savedPositon参数只能通过浏览器的前进后退键才管用，通过超链接切换的无法滚动
移动端：上拉刷新，下拉加载。原生JS无法实现，通过第三方库解决
devServer.proxy
- 使用中间件：http-proxy-middleware
- 根目录新建vue.config.js文件
- App.vue的new Vue实例中created(){}钩子使用axios请求