（3）元素被激活时候的样式active-class

About
Home

active-class默认的样式名为active。如果想要加的样式名为active，则active-class可以不写。

（4）路由器的视图，指定组件的呈现位置

（5）创建路由器

在router文件夹的index.js文件中

import VueRouter from 'vue-router'
import About from '../components/About'
import Home from '../components/Home'
//创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]
})

（6）应用vue-router

vue-router是一个插件库，在使用的时候需要use一下然后进行挂载，在main.js中

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({el:'#app',render: h => h(App),router:router
})

常见的写法，也可以在router文件夹的index.js文件中use，在main.js文件中引入route直接挂载即可

（7）路由组件与一般组件的区别

与都是路由组件，它与一般组件有如下不同点

（1）写法不同

一般组件：需要引入跟注册，写了标签
路由组件：点击路由链接，修改了路径，前端路由器监测到了，匹配规则的时候一个路径对应一个组件，然后把组件渲染出来放到指定的位置

（2）存放位置不同

一般组件：components
路由组件：pages

（3）组件实例对象上的属性不同

一般组件
路由组件：多了两个属性（$route、$router）

注意：通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。每个组件都有自己的$route属性，里面存储着自己的路由信息。整个应用只有一个router，可以通过组件的$router属性获取到。

（8）路由的重定向redirect

在router文件夹中的index.js中配置路由

{ path: '/', redirect: '/homePage'}

（9）路由的懒加载

https://blog.csdn.net/m0_46613429/article/details/128420980

（10）嵌套路由

在Home组件中注册News和Message组件

路由器router文件中引入子组件并注册

export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News,},{path:'message',component:Message,}]}]
})

注意：子组件的path不需要加/，因为底层在遍历的时候发现是子路由会自动加/

点击导航链接跳转，错误写法：

News
Message

点击News导航栏，路径变为了http://localhost:8080/#/news，组件没有展示，因为没有对应的规则

News
Message

（11）路由组件传参

https://blog.csdn.net/m0_46613429/article/details/121774790

（12）路由跳转的两种模式

对浏览器的历史记录进行操作的两种方式：push是压栈操作，会留下历史记录；replace会替换掉栈顶的记录。默认的路由跳转使用的是push模式

开启replace模式

About
Home

（13）编程式路由导航

https://blog.csdn.net/m0_46613429/article/details/121776369

（14）缓存路由组件

通过切换，“隐藏”了的路由组件，默认是被销毁掉的。有时候想切走之后再切回来，能够保留之前的东西。
例如用户在登录注册时输入了一些基本信息，不小心切换到了其他路由再切回来，原来输入的内容还在，可以提高用户体验感

只要在区域所展示的组件都会被缓存

但是不是所有的组件都有必要缓存，如果一个组件要展示的内容不变或者组件中的数据需要实时跟后台同步，如果被缓存就可以不会发送ajax请求，也就不会实时更新页面。

缓存一个路由组件

如果有多个需要缓存，可以写成数组的形式

除了指定的路由组件，其他的都被缓存

要保存着当时真实DOM里面数据的组件缓存下来
①加一个include，只有匹配的组件会被缓存
②加一个exclude，任何匹配成功的组件都不会缓存

作用：让不展示的路由组件保持挂载，不被销毁。
注意：写在include和exclude里面的是组件名，不是路由名，值可以是字符串或者正则表达式

（15）路由组件所独有的两个生命周期勾子：activated 与 deactivated

当被缓存的路由组件中有某个场景需要在组件销毁的时候做一些事情，例如清除定时器

组件挂载的时候开启定时器，组件销毁前清除定时器，常规的写法如下：

mounted(){this.timer = setInterval(() => {console.log('@')},1000)
},beforeDestroy() {clearInterval(this.timer)
}

但是由于组件被缓存了，离开页面的时候依然保持挂载不被销毁，就不会触发beforeDestroy，定时器也不会被清除了
这时需要用到下面两个新的路由组件所独有的生命周期勾子

// 路由组件被激活时触发
activated(){this.timer = setInterval(() => {console.log('@')},1000)
},// 路由组件失活时触发
deactivated() {clearInterval(this.timer)
}

作用：用于捕获路由组件的激活状态

（16）全局前置路由守卫beforeEach

正常情况下，点击路由导航就会跳转到对应的路由组件。但是有些特殊的时候，不是所有的导航项都能随便点，得符合某些要求才能点，也就是权限的问题。

router.beforeEach((to,from,next)=>{console.log('前置路由守卫',to,from)if(to.path == ???){ if(???){next()}else{doSomething...}}else{next()}
})

初始化的时候to 与 from 里面的东西

当点击Home路由导航时

!!! 初始化和每次路由切换之前router.beforeEach((to,from,next) => {})被调用，调用了next()才会放行往下走

真实项目开发中的应用：

如果进入的是登录页就放行，如果不是登录页，再判断当前缓存中有没有token，如果有就放行，如果没有就回到登录页

router.beforeEach((to, from, next) => {if (to.path !== '/login') {if (sessionStorage.getItem("token")) { next();} else {next({path: '/login'})}} else {next();}
});

（17）全局后置路由守卫afterEach

router.afterEach((to,from)=>{console.log('后置路由守卫',to,from)doSomething...
})

!!! 初始化与每次路由切换之后被调用

真实项目开发中的应用：

使用NProgress来显示在页面顶部的进度条https://blog.csdn.net/m0_46613429/article/details/128406831

（18）独享路由守卫beforeEnter

某一个路由所独享的，写在路由规则配置里面

{name:'Message',path:'/message',component:Message,meta:{title:'消息'},beforeEnter: (to, from, next) => {console.log('独享路由守卫',to,from)if(???){ doSomething...}else{next()}}
}

注意 ：独享路由守卫只有前置的没有后置的，但是它可以和全局后置路由守卫等随意搭配使用

（19）组件内路由守卫beforeRouteEnter 与 beforeRouteLeave

在组件内部写

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {if(???){ doSomething...}else{next()}
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {if(???){ doSomething...}else{next()}
}

（20） history模式 与 hash 模式

vue中默认开启的工作模式就是hash模式

如果要更改就在router文件夹的index.js中

const router = new VueRouter({routes,mode:'history'
})

（1） history模式：

① path的路径中没有#，美观。

② 兼容性和hash模式相比略差。

③ 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

如：http://localhost:8080/info/demo/test

服务器中请求的资源是/info/demo/test，该资源在服务器上找不到就会返回404错误码

项目打包上线：前端的静态资源部署到服务器上

在项目终端执行命令：npm run build，打包成功后生成一个dist文件夹，里面包含一些静态资源如下：

项目初始化路径为：http://localhost:8080/，点击页面中的路由导航，浏览器中的地址发生变化http://localhost:8080/info/demo/test，但是不会发送网络请求，点击浏览器的刷新按钮就报404了。

解决404问题需要跟后台人员配合。

（2） hash模式：

① path的路径中有#，不美观。

#号后面的都是哈希值

② 兼容性较好。

③ #后面的hash值不会随着HTTP 请求带给服务器。

如：http://localhost:8080/info/#/demo/test

服务器中请求的资源是/info/，该资源在服务器上找得到就会返回给前端

（二）React路由

react-router-dom

1、是react的一个插件库
2、专门用来实现一个SPA应用
3、基于react的项目基本都会用到此库

react中靠路由链接实现切换组件

（1）安装

npm i react-router-dom

（2）借助标签实现路由的切换

import { Link，NavLink } from 'react-router-dom'

错误写法：

About
Home

路由链接需要由路由器包裹

错误写法：

AboutHome

要具体指明哪一种路由器（BrowserRouter、HashRouter）

import { BrowserRouter} from 'react-router-dom'

AboutHome

如果路径为/about就展示About组件，如果路径是/home就展示Home组件

（3）元素被激活时候的样式

该元素被激活的时候追加样式用标签中的activeClassName属性

AboutHome

activeClassName默认的样式名为active。如果想要加的样式名为active，则activeClassName可以不写。

注意：标签体内容是一个特殊的标签属性，可以直接写在标签属性中，用children接收

通过this.props.children可以获取标签体内容

（4）注册路由

import { Route } from 'react-router-dom'

错误写法：

About} />
Home} />

路由需要由路由器包裹

import { BrowserRouter,Route } from 'react-router-dom'

About} />Home} />

页面不报错，点击对应的导航链接，地址栏对应的路径也发生变化，但是内容展示区没有改变

原因： 和外面都包裹了一个，但是整个应用都得用一个路由器去管理，如上用到了两个路由器，发生的变化通知到了包裹的路由器，但是路由器之间不能进行沟通。

解决方法：整个应用用一个路由器管理

About
Home

About} />
Home} />

注意：正常情况下，一个路径对应一个组件。但如果写相同的路径不同的组件，同一个路径的多个组件也能够展示出来，但是路由匹配是按照注册的顺序来的，匹配到了一个还会继续往下匹配，就会出现效率问题。

解决方法：用组件包裹路由组件

About}/>Home}/>Test}/>

用了匹配到了一个组件之后就不会往下匹配了（单一匹配），可以提高路由匹配效率。

在index.js中直接把进行包裹

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App'
ReactDOM.render(, document.getElementById('root'))

（5）路由组件与一般组件的区别

与都是路由组件，它与一般组件有如下不同点

（1）写法不同

一般组件：
路由组件：

（2）存放位置不同

一般组件：components
路由组件：pages

（3）接收到的props不同

一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性（history、location、match）

history:go: ƒ go(n)goBack: ƒ goBack()goForward: ƒ goForward()push: ƒ push(path, state)replace: ƒ replace(path, state)
location:pathname: "/about"search: ""state: undefined
match:params: {}path: "/about"url: "/about"

（6）解决多级路径刷新页面样式丢失的问题

index.html中引入了样式，样式写在了public文件夹下的css文件夹中，如下：

About
Home

About}/>Home}/>

描述：首次打开页面发送网络请求拿到样式，点击导航栏可以正常切换组件，没有发送网络请求。点击刷新按钮，发送网络请求，整个页面的样式丢了。

（1）正常情况下的网络请求路径：http://localhost:3000/css/bootstrap.css
（2）刷新后的网络请求路径：http://localhost:3000/study/css/bootstrap.css

扩展: http://localhost:3000是脚手架内置的服务器，通过webpack的devServer开启的，并且内部配置了public文件夹就是内置服务器的根路径。如果请求的资源不存在，就会返回public文件夹中的index.html

原因：正常访问http://localhost:3000/css/bootstrap.css就是在访问public文件夹下的/css/bootstrap.css可以正常返回，访问http://localhost:3000/study/css/bootstrap.css就是在访问public文件夹下的/study/css/bootstrap.css找不到这个资源就返回index.html所以失去样式。

解决方法：

（1）public/index.html 中 引入样式时不写 ./ 写 / （常用）

./是相对路径，以当前文件出发去找，/就会直接去public下找

（2）public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）

%PUBLIC_URL%代表的就是public的绝对路径

（3）使用HashRouter

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom';
import App from './App'
ReactDOM.render(, document.getElementById('root'))

http://localhost:3000/#/
#后面的东西都是hash值，认为是前端资源，不会带给3000这台服务器，所以刷新发网络请求的时候不会把path路径带过去

（7）路由的严格匹配与模糊匹配

About
Home

About}/>Home}/>

Home组件需要的是/home/a/b，但匹配的是/home，页面能正常展示

About}/>true} path="/home" component={Home}/>

exact为true开启严格匹配，页面不再展示内容

注意：默认使用的是模糊匹配（【输入的路径】必须包含要【匹配的路径】，且顺序要一致）；严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

（8）路由的重定向

About}/>Home}/>

注意：一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

（9）嵌套路由

Home
About

Home}/>About}/>

在Home组件中注册News和Message组件

错误写法：

News
Message

News}/>Message}/>

注册路由有先后顺序，Home和About组件是先注册的，News和Message组件是后注册的，每当点击一个路由链接要改地址的时候，它都从最开始注册的那个路由进行逐层匹配，点击News会从最先注册的那两个组件开始找，结果没找到就会Redirect 到about找到About组件。

注意：注册子路由时要写上父路由的path值。路由的匹配是按照注册路由的顺序进行的

News
Message

News}/>Message}/>

点击News更改路径为/home/news，从最先注册的那两个组件开始找，由于模糊匹配找到了Home组件的路径/home，匹配成功就展示Home组件。如果给Home组件开启严格模式，路径就匹配不上，组件就失效找不到了。

（10）路由组件传参

https://blog.csdn.net/m0_46613429/article/details/121774790

（11）路由跳转的两种模式

对浏览器的历史记录进行操作的两种方式：push是压栈操作，会留下历史记录；replace会替换掉栈顶的记录。默认的路由跳转使用的是push模式

开启replace模式

About
Home

（12）编程式路由导航

https://blog.csdn.net/m0_46613429/article/details/121776369

（13）让一般组件具备路由组件所特有的API：withRouter()

路由组件接收到三个固定的属性（history、location、match），如果在一般组件中去使用就会报错，因为不存在。

例如在一般组件中用编程式路由导航中的方法做跳转等

解决方法：

import {withRouter} from 'react-router-dom'
class Demo extends Component {back = ()=>{this.props.history.goBack()}forward = ()=>{this.props.history.goForward()}go = ()=>{this.props.history.go(-2)}render() {console.log(this.props)}
}
export default withRouter(Demo)

withRouter可以加工一般组件，让一般组件具备路由组件所特有的API，返回值是一个新组件。

（14） BrowserRouter模式 与 HashRouter 模式

1.底层原理不一样

BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。

2.path表现形式不一样

  BrowserRouter的路径中没有#,例如：localhost:3000/demo/testHashRouter的路径包含#,例如：localhost:3000/#/demo/test

3.刷新后对路由state参数的影响

  (1).BrowserRouter没有任何影响，因为state保存在history对象中。(2).HashRouter刷新后会导致路由state参数的丢失！！！

4.备注：HashRouter可以用于解决一些路径错误相关的问题。