路由的使用
命名路由
给路由起个名字，这样可以方便我们在使用路由的时候， 简写路径
命名视图
给出了一级视图以外的其他视图起名字， 这样可以区分不同级别的路由使用不同级别的视图
动态路由 & 路由传参 & 路由接参
vue cli3 配置反向代理 20分钟 在根目录下面新建一个 vue.config.js// vue.config.js中可以默认直接使用 http-proxy-middlewaremodule.exports = {devServer: {proxy: {'/douban': {// /douban 是一个标记target: '', // 目标源changeOrigin: true, // 修改源pathRewrite: {'^/douban': '' }},'/siku': {target: '',changeOrigin: true,pathRewrite: {'^/siku': ''}}}}}
路由的传参 10分钟
<router-link :to = "{name: 'list',params: {id: xxx}, query: {xxx:xxx}}"></router-link>
路由的接参
我们发现凡是使用了路由的组件，我们统称为： 路由组件路由组件身上会自动添加一个 $route的数据
id: this.$route.params.idquery: this.$route.query.xxx
编程式导航 5分钟
pushthis.$router.push('/home')this.$router.push({name,params,query})push可以将我们的操作存放到浏览器的历史记录 replace this.$router.replace(’/home’)this.$router.replace({name,params,query})replace没有将我们的操作存放到浏览器的历史记录， 效果为返回了二级
业务：
按钮的返回 pushreplacebackgo
路由进阶部分 – 导航守卫（ 路由守卫 ）
作用： — 类似 【保安】
守卫路由 进 举例： 携带数据进 出 举例： 事情完成才能出
导航守卫一共有三种形式
A: 全局导航守卫
全局前置守卫router.beforeEach(fn)fn中有三个参数 全局的解析守卫 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。必须保证整个项目的守卫和异步路由组件解析完成 全局的后置守卫 可以做一些用户友好提示
B: 路由独享守卫
写在路由表中的守卫钩子针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的
C: 组件内守卫
组件内的前置守卫 beforeRouteEnter((to,from,next)=>{}) 导航进入组件时，调用this是访问不到的，如果非要访问this ,必须通过 next(vm=>{})访问因为组件此时没有创建，所以没有this案例： 数据预载（进入组件前就获得数据）
next(vm => {//vm指的就是组件const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorysvm.$set(vm.category,'categorys',result)})
组件内的后置守卫
- 导航离开组件时，调用
- this是可以访问到组件内的更新守卫（ 路由传参和路由的接参 ）在当前路由改变，但是该组件被复用时调用举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。可以访问组件实例this
功能： 导航守卫可以监听路由变化情况
名词
前置： 要进入当前路由后置： 要离开当前路由
关于next的使用
next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由next( false ) 表示不通过， 表示从当前路由跳转不到目标路由next(’/login’) 等价于 next({path:’/login’}) 跳转指定的路由next(’/login’) 等价于 next({path:’/login’,params,query})next( fn ) 数据预载
业务： 当我们进入到一个项目的首页时，但是当我们没有注册账号时，它主动跳转到了注册/登录页
router.beforeEach((to,from,next)=>{const name = localStorage.getItem('name')if( name || to.path === '/login' ){//如果有 / --> /homenext()}else{next('/login')}})
业务： 当进入mine页面的时候， 要判断用户是否登录，如果没有登录，跳转登录页
路由导航守卫
3中类型 7个路由监听钩子 业务： 监听整个项目的路由变化情况 全局的前置守卫监听某个路由的变化情况 路由的独享守卫监听的路由组件的路由变化情况 组件内的导航守卫
