vue-router
是vue的一个插件库，用于实现SPA应用
路由
SPA应用
SPA应用就是单页Web应用，整个应用只有一个完整的页面，点击页面中 的导航链接不会刷新页面，只会做页面的局部更新，同时数据需要通过ajax请求获取
路由
路由就是一组key-value的对应关系，多个路由需要经过路由器的管理
key为路径，value可能是function也可能是component
路由分为前端路由和后端路由
前端路由
value是component，用于展现页面内容。
工作过程：当浏览器的路径改变时，对应的组件就会显示
我们主要学习前端路由
后端路由
value是function，用于处理客户端提交的请求
工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
路由基本使用
首先使用npm命令安装vue-router，注意vue2安装3版本，vue3安装4版本
然后在main.js文件中引入 vue-router
在src下新建文件夹router，并在其中新建index.js，用于管理路由
index.js中引入vue-router，设为VueRouter，并使用new VueRouter（）新建并暴露一个router对象，其参数是一个配置对象。配置对象中是一组一组的路由规则
const router = new VueRouter({
routes:[
//About、Home是组件名
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
并且需要在main.js文件中引入router，并且将其写在创建vm时的配置对象中
然后在app.vue中实现切换（active-class可配置高亮样式）
<router-link active-class="active" to="/about">About</router-link>
同时还要使用<router-view></router-view>指定组件的展示位置
注意：
路由组件（router管理的组件被称为路由组件）通常存放在pages文件夹，一般组件通常存放在components文件夹。
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
每个组件都有自己的$route属性，里面存储着自己的路由信息。
整个应用只有一个router，可以通过组件的$router属性获取到。
嵌套路由
即在路由组件中还有路由组件，层层嵌套
在配置路由规则时，由children配置项配置：
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写：/news
component:News
},
{
path:'message',//此处一定不要写：/message
component:Message
}
]
}
]
跳转时要写完整路径：
<router-link to="/home/news">News</router-link>
路由传参
对路由组件传参时，由<router-link>标签中的to传递：
<!-- 传递id=666&title=你好两个参数 -->
<!-- 跳转并携带query参数，to的字符串写法,不建议 -->
<!-- 当传递参数中没有变量时，可以直接使用to -->
<router-link to="/home/message/detail?id=666&title='你好'">跳转</router-link>
<!-- 当传递参数中有变量时，要使用:to和模版字符串 -->
<router-link :to="`/home/message/detail?id=$(m.id)&title=$(m.title)`">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
接收参数时，访问组件的&route里的query就可以得到数据
$route.query.id
$route.query.title
命名路由
即给路由取名字，在配置路由规则时，由name配置项决定
作用：可以在跳转时简化编码
例如：
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}
跳转时可以通过name跳转，不用路径：
<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>路由的params参数
通过params传参数，首先在配置路由规则时，需要声明接收params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
}
]
}
传递参数时，有两种方法：
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数，to的对象写法 -->
<!-- 不能使用path配置项，必须使用name配置 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
路由的props参数
有三种方法来接收props参数
让组件更方便地接收参数
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
// props:{a:900}
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
// props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
}
注意，和组件里的props一样，需要在路由组件中声明props。例如 props:['id','title']
<router-link>的replace属性
作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录（并不是替换之前所有记录，只是替换之前最后一条记录）。路由跳转时候默认为push
可以通过在router-link中添加replace属性来开启replace模式：<router-link replace .......>News</router-link>
编程式路由导航
不借助<router-link>实现路由跳转，让路由跳转更加灵活
//$router的两个API
//使用push方法跳转到路由组件
this.$router.push({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
//使用replace方法跳转到路由组件
this.$router.replace({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退，参数为正数表示前进多少步，参数为负数表示后退多少步
缓存路由组件
路由组件进行切换时，隐藏的路由组件会被销毁，直到下一次重新显示时才会重新生成该组件，这样，当我们在一个路由组件中存储了数据，然后离开该路由组件，下一次再访问该路由组件，那些存储的数据就会丢失
为了解决该问题，可以使用<keep-alive>包裹<router-view>标签，然后使用include表明哪些组件在离开之后不进行销毁，注意，include里面跟的是路由组件名，即在配置路由规则时设置的name
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
当没有使用include表明具体哪些组件在离开之后不进行销毁时，表示该处展示的组件在离开之后都不进行销毁。若一次表示多个组件离开之后不进行销毁时，可以使用:include=“['组件1名字'，'组件二名字']”
两个新的生命周期钩子
路由组件独有的两个生命周期钩子函数：
activated：路由组件被激活时触发。
deactivated：路由组件失活时触发。
路由守卫
对路由进行权限控制，根据条件控制路由组件是否能被访问
分为全局守卫、独享守卫、组件内守卫
全局守卫
全局守卫分为前置路由守卫和后置路由守卫
...
const router=New VueRouter({...})
//router是设置路由时设置的变量名，该语句在路由规则设置后，暴露路由之前执行
//全局前置守卫：初始化时执行、每次路由切换前执行，使用beforeEach
//from是切换前所在的组件的信息，to是要切换的组件的信息
//next用于控制接下来是否放行，让目标组件显示
router.beforeEach((to,from,next)=>{
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制，isAuth是设置路由规则时，存储在meta中的数据，表示路由是否需要判断
if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
next() //放行
}else{
alert('暂无权限查看')
}
}else{
next() //放行
}
})
//全局后置守卫：初始化时执行、每次路由切换后执行，使用afterEach
router.afterEach((to,from)=>{
if(to.meta.title){
document.title = to.meta.title //修改网页的title
}else{
document.title = 'vue_test'
}
})
后置路由守卫可以用来在转换路由组件之后，设置一些信息
独享路由守卫
某一个路由组件独享的路由守卫
在设置路由规则时设置,只有前置守卫（beforeEnter），具体使用和全局路由守卫类似，
const router=New VueRouter({
routers:[{
name:'about',
path:'/about',
component:'About',
beforeEnter(to,from,next){
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
}
}else{
next()
}
},
}]
})组件内路由守卫
在组件内部设置路由守卫，即路由守卫的代码写在组件自己的vue文件中
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}
history模式和hash模式
在访问路径中，#及其后面的值叫做hash值
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
hash模式：
地址中永远带着#号，不美观 。
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
兼容性较好。
history模式：
地址干净，美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
默认为hash模式，如果想要修改，在配置路由规则时，设置mode规则，如mode:'history'
Vue UI组件库
一些提供网页布局样式的UI组件库
PC端的代表性组件是element-UI
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
