路由的使用

学无止境，望君把握时间。

命名路由：

给路由起个名字，这样可以方便我们在使用路由的时候， 简写路径

命名视图：

给出了一级视图以外的其他视图起名字， 这样可以区分不同级别的路由使用不同级别的视图

动态路由

--vue cli3 配置反向代理
---在根目录下新建一个vue.config.js
vue.config.js中可以默认直接使用
module.exports = {
   devServer : {
      proxy : {
        'doban' :{ //这只是一个标记
            target : 'http://api.douban.com',//目标源
            changeOrigin : true,//修改源
            pathRewrite : {
               '^/douban':''
            }
        },
        '/siku': {
          target: 'https://android.secoo.com',
          changeOrigin: true,
          pathRewrite: {
            '^/siku': ''
          }
      }     
   }
}

路由传参：

<router-link :to = "{name: 'list',params: {id: xxx}, query: {xxx:xxx}}">
</router-link>

路由的接参：

 - 我们发现凡是使用了路由的组件，我们统称为： 路由组件
 - 路由组件身上会自动添加一个  $route的数据
 -  id: this.$route.params.id
 - query: this.$route.query.xxx

编程式导航：

-push
  -  this.$router.push('/home')
  - this.$router.push({name,params,query})
  - push可以将我们的操作存放到浏览器的历史记录
-replace:
  - this.$router.replace('/home')
  - this.$router.replace({name,params,query})
  - replace没有将我们的操作存放到浏览器的历史记录， 效果为返回了二级 

路由进阶部分：

–导航守卫（路由守卫）：
1.作用：

• 守卫路由

 - 进 :
   举例： 携带数据进
-出 ：
举例： 事情完成才能出

2.导航守卫一共有三种形式

A:全局导航守卫：
 1. **全局前置守卫** `router.beforeEach(fn)`
     1. fn中有三个参数
 2.全局的解析守卫 
     1. 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
     2. 必须保证整个项目的守卫和异步路由组件解析完成
 3.全局的后置守卫
   可以做一些用户友好提示

B：路由独享守卫
  1.写在路由表中的守卫钩子
  2.针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的

C：组件内守卫
   组件内的前置守卫   beforeRouteEnter((to,from,next)=>{})
      - 导航进入组件时，调用
      - this是访问不到的，如果非要访问this ,必须通过 next(vm=>{})访问
      - 因为组件此时没有创建，所以没有this
      - 案例： 数据预载（进入组件前就获得数据）
       
  next(vm => { //vm指的就是组件
                  const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
                  vm.$set(vm.category,'categorys',result)
                })
    组件内的后置守卫
       - 当好离开组件时，调用
       - this是可以访问到 
   组件内的更新守卫
       - **在当前路由改变，但是该组件被复用时调用**
       - 举例来说，**对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，**
       - 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
       - 可以访问组件实例 this

3.功能 ：导航守卫可以监听路由变化情况

4.名词解释：

- 前置： 要进入当前路由
- 后置： 要离开当前路由

5.关于next()的用法：

- next()  等价于  next( true )  表示可以从当前路由跳转到目标路由
- next( false ) 表示不通过， 表示从当前路由跳转不到目标路由 
- next('/login') 等价于  next({path:'/login'}) 跳转指定的路由
- next('/login') 等价于  next({path:'/login',params,query})
- next( fn ) 数据预载

6. 业务： 当我们进入到一个项目的首页时，但是当我们没有注册账号时，它主动跳转到了注册/登录页

  router.beforeEach((to,from,next)=>{
      const name = localStorage.getItem('name')
      if( name || to.path === '/login' ){
        //如果有   /  -->  /home
        next()
      }else{
        next('/login')
      }
  })

总结：

路由导航守卫：
-3种类型 7个路由钩子函数
-业务：
  监听整个项目的路由变化情况 ： ---全局前置守卫
  监听某个路由的变化情况 ： ---路由的独享守卫
  监听路由的组件的路由变化情况 ： ---组件内的守卫导航