结合项目中的使用,学习vue-router. https://1657413883.github.io/2017/03/18/vue-router总结/

http://www.tuicool.com/articles/J3ArAri

路由的用法

// router.config.js

const routerConfig = [

    {
        path: '/login',
        component: resolve => require(['登录路径.vue'],resolve),
        meta: {noCheckSession: true}
    },
    {
        path: '/',
        component: resolve => require(['通用的主框架.vue'],resolve),
        children: [
            {
                path: '/team',
                name: 'team',
                component: resolve => require(['对应的路径.vue'],resolve)                    
            }    ,
            {
                //其他类似
            }
        ]
    }

]


// main.js

import VueRouter from 'vue-router'
import ConfigRoute from './router.config'

Vue.use(VueRouter);

const router = {
    mode: 'history',
    base: __dirname ,
    routes: ConfigRoute,
    scrollBehavior(to,from,savedPosition){
        if(savedPosition){
            return savedPosition;
        }else{
            return {x: 0,y: 0}
        }
    }
}        

router.beforeEach((to, from, next) => {
  if(to.matched.some(record => !record.meta.noCheckSession)) {

    // 这个路由需要auth,检验是否登录了.

    let isLogin = auth.checkAuth()
    // console.log('need login', isLogin);
    if(!isLogin){

        // 没有登录,重定向到登录页面    

      console.error('Place login!')
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }else{
      next()
    }
  }else{
    next()
  }
})

const app = new Vue({     
  router      
}).$mount('#app')

知识点

router-link

• 在HTML5 history模式下使用了base选项,所有to属性可以不用写基路径
• 会拦击点击事件,不会重新加载页面.
• router-link默认渲染为a标签,我们可以通过tag属性设置为别的标签(常用的li).

• to属性可以绑定name(命名组件),query(带查询参数)

  <router-link :to="{name:'entityList', query:{page: 'Ecp.SystemMessage.List.vdp'}}"
   class="msg" tag="li">
  
  </router-link>

router-view

• router-view: 渲染匹配到的视图组件,router-view匹配到的视图组件里面还可以嵌套自己的router-view.根据嵌套路径(children)来继续渲染.
• router-view可以通过name属性来渲染对应的component下相应的组件

• router-view可以配合transition与keep-alive使用,如果同时使用,里面要使用keep-alive.

  <transition  name="fade" mode="out-in"         key="$route.path">
  
     <router-view></router-view>
  
  </transition>

路由信息对象

一个 route object（路由信息对象） 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）

route object 是 immutable（不可变） 的，每次成功的导航后都会产生一个新的对象。

• 路由的滚动行为:当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样.(这个功能只在 HTML5 history 模式下可用)

  当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：
  
  scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
  
  scrollBehavior这个方法返回滚动位置的对象信息.如果返回一个布尔假的值，或者是一个空对象，那么不会发生滚动。
  
  如:
      return {x:0,y:0} // 表示对于所有路由导航，简单地让页面滚动到顶部。
  
      return savedPosion; //表示在按下 后退/前进 按钮时，就会像浏览器的原生表现那样
  
      if (to.hash) {
          return {
            selector: to.hash
          }
        }
      // 模拟『滚动到锚点』的行为

• 产生路由信息对象的行为

  1. 组件内的this.$route,$route.watch回调
  
  2. route.match(location)的返回值
  
  3. 导航钩子的参数:
  
          router.beforeEach((to, from, next) => {
            // to 和 from 都是 路由信息对象
          })
  4. scrollBehavior的参数
  
          const router = new VueRouter({
            scrollBehavior (to, from, savedPosition) {
              // to 和 from 都是 路由信息对象
            }
          })

• $route.path: 字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。

• $route.params: 一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。

• $route.query:一个key/value对象，表示URL查询参数。例如，对于路径/foo?user=1，则有$route.query.user == 1，如果没有查询参数，则是个空对象。

• $route.hash: 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

• $route.fullPath: 完成解析后的 URL，包含查询参数和 hash 的完整路径

• $route.matched:一个数组，包含当前路由的所有嵌套路径片段的 路由记录 (包含children下路径)。

• $route.name: 当前路由的名称

Router的构造配置: router配置.

• mode: 默认值为’hash’,可选值: “hash” | “history” | “abstract”.

  1. hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
  
  2. history: 依赖 HTML5 History API 和服务器配置
  
  3. abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

• base: 默认值为’/‘,表示应用的基路径.如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/“

• linkActiveClass: 默认值: “router-link-active”,

• scrollBehavior方法

导航钩子

导购钩子:用来拦截导航，让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。

// 全局钩子
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数
     - next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）
     - next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
     - next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。中断当前导航，然后进行一个新的导航。             
})

// 单个路由独享的:  在自己的路由里面设置
{
  path: '/foo',
  component: Foo,
  beforeEnter: (to, from, next) => {
    // ...
  }
}

// 组件内的钩子
    - beforeRouteEnter
    - beforeRouteUpdate
    - beforeRouteLeave

router实例

• router.app: 配置了 router 的 Vue 根实例。

• router.mode: 路由使用的 模式。

• route.currentRoute: 当前路由对应的 路由信息对象.

• route.beforeEach(guard)

• route.push() 跳转路由,会向 history 栈添加一个新的记录

  等价于
  <router-link :to="...">
  
  router.push({ name: 'user', params: { userId: 123 }})
  
  router.push({ path: 'register', query: { plan: 'private' }})

• route.replace(): 它不会向 history 添加新记录，替换掉当前的 history 记录。

等价于:
<router-link :to="..." replace>

• route.go(n):在 history 记录中向前或者后退多少(n)步.类似 window.history.go(n)

• route.back()

• route.forward()

异步加载

把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件.

// AMD风格

component: resolve => require(['登录路径.vue'],resolve)