VUE路由
当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由
路由：把 url 与 应用中的对应的组件进行关联，通过不同的 url 访问不同的组件
vue-router 的安装
npm i vue-router
OR
yarn add vue-router
Vue.use()
通过前面提到的 Vue.use 方法，把 vue-router 安装到指定的 Vue 实例中
创建路由对象
通过 vue-router 提供的 Router 构造函数（类）创建路由对象，路由对象包含了当前使用的模式（hash、history）、路由信息
（url 与 组件的对应关系）等信息
import Router from 'vue-router';
import Home from './views/Home.vue';
import Home from './views/About.vue';
const myRouter = new Router({
mode: 'history',
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
});
...,
new Vue({
...,
router: myRouter
});
router-view 组件
配置了路由信息以后，我们还需要页面（组件）中指定路由对应的组件出现的位置，当当前访问的 url 与某个路由信息匹配的时候，
该组件就会出现在 router-view 组件所在的位置
// App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<hr>
<router-view/>
</div>
</template>
路由配置案例：
main.js
异步请求
在实际的应用开发中，与后端交互，进行异步请求是很常见的需求
axios安装
npm i axios
请求
跨域
vue-cli 提供了一个内置基于 node 的 webserver ，我们可以使用它提供的 proxy 服务来进行跨域请求代理
vue.config.js
在项目的根目录下创建一个 vue.config.js 的文件，通过 `npm run serve` 启动服务的时候，会读取该文件
跨域请求代理配置
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:7777',
pathRewrite: {
'^/api': ''
}
}
}
}
}
修改配置文件，需要重启服务：`npm run serve`
// home.vue
<script>
...
created() {
axios({
url: '/api/items'
}).then(res => {
this.items = res.data;
});
}
...
</script>
动态路由
有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url
我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会
在设计路由的时候进行特殊的处理
其中 `:itemId` 表示匹配的 url 中动态部分内容，如上面的 1,2,3 等，同时该值将被赋值给路由的变量 itemId
路由对象
vue-router 会在组件中添加（注入）两个属性
- $router
- $route
$router 对象
该对象其实就是 new VueRouter(...) 得到的路由对象，通过该对象我们可以访问全局路由信息，调用路由下的方法，
比如：`go`、`back`、`push` 等
$route 对象
通过该对象可以访问与当前路由匹配的信息
$route.params
获取动态路由有关的信息
Detail.vue
router/index.js
router/index.js
apis.js
queryString（？后面的东西）
有的时候，我们可能也会用到 queryString
$route.query
我们可以通过路由对象 $route 的 query 属性来获取 queryString
编程式导航
有的时候，我们可能需要用到编程的方式来导航（跳转），而不是点击链接。如：当 `sort` 发生改变的时候跳转
路由组件的复用
为了提高性能，增强路由组件的复用，当路由切换使用的是同一个组件的时候，则会复用该路由组件，而不是销毁重建，这个时候，
我们就需要通过 watch 或者 路由相关的生命周期函数来处理切换路由导致的变化
watch
如果切换的路由复用了组件，这个时候，我们可以使用 watch 监听 $route
to : 改变之后的 $route 对象
from : 改变之前的 $route 对象
但是我们可以使用 vue-router 提供路由守卫（路由有关的生命周期函数）来处理路由有关的业务逻辑
路由守卫
当导航发生改变的时候，vue-router 会在多个不同的地方调用指定的函数，也就是与路由有关的生命周期函数，也称为：路由守卫
- 组件内守卫
- 路由独享守卫
- 全局守卫
组件内守卫
定义在组件内的与路由有关的生命周期函数（守卫）
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
beforeRouteEnter
当路由解析完成，并中指定的组件渲染之前（组件 `beforeCreate` 之前），这里不能通过 `this` 访问组件实例，需要通过
`next` 回调来进行调用
Home.vue
beforeRouteUpdate
在当前路由改变，但是该组件被复用时调用
beforeRouteLeave
导航离开该组件的对应路由时调用
路由守卫参数
to
即将要进入的目标 路由对象（$route）
from
当前导航正要离开的路由对象（$route）
next
路由确认回调函数，类似 Promise 中的 resolve 函数，一定要确保调用 next 函数，但是后续的导航行为将依赖 next 方法的调用参数
路由独享的守卫
可以在路由配置上直接定义 `beforeEnter` 守卫，相对来说，应用不多
router/index.js
全局守卫
全局守卫是注册在 router 对象（new VueRouter({...})）上的
- beforeEach
- beforeResolve
- afterEach
beforeEach
注册在路由对象上，当一个导航触发时，全局前置守卫按照创建顺序调用
router/index.js
beforeResolve
在所有组件内守卫和异步路由组件被解析之后被调用
afterEach
导航被确认后调用
因为导航已经被确认，所以没有 `next`
嵌套路由
一些比较复杂的应用会有多层嵌套的路由和组件组成
在应用增加一个用户个人中心，用户中心又是由多个页面组成，如：
添加路由与子路由
children 属性
一个路由中的 `children` 表示嵌套的子路由
子路由视图
有了子路由以后，还需要在视图组件中设置 `router-view`
重定向redirect
有的时候，我们会根据某种需求对用户请求的页面进行重新定位
案例
现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后
该用户进入网站直接根据记录的选择进入对应的频道
组件
路由配置
redirect
别名alias
重定向，是从一个路由切换到另外一个路由，而别名是不同的路由显示同一个页面，比如：`/user` 是用户中心的路由，`/member` ，
我们也可以给这个页面定义另外一个路由，虽然在某些时候，重定向与别名有类似的效果，但是，别名不存在跳转，浏览器地址栏上
显示的 URL 并不会切换
404
网友评论