vue-router-官网

 

  vue-router：

vue router功能：
    嵌套的路由/视图表
    模块化的/基于组件的路由配置
    路由参数/查询/通配符
    基于vue.js过渡系统的视图过渡效果
    细粒度的导航控制
    带有自动激活的css class的连接
    h5历史模式或hash模式，在IE9中自动降级
    自定义的滚动条行为


<router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。一样地，一个被渲染组件一样能够包含本身的嵌套 <router-view>


以/开头的嵌套路径会被看成根路径，则使用嵌套路径无须设置嵌套的路径。

　　vue-router传参：

router传参方式：路由匹配参数；query方式传参；params方式传参；
(1)动态路由匹配,路由匹配参数：
     // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
    // 获取参数
     let name = this.$route.params.id; // 连接里的id被封装进了 this.$route.params       
  (2) query  
     this.$router.push('/login/' + this.id);
     this.$route.query.id 
    
    this.$router.push({
      path: '/payment/recharge',
      query: {
        amount: that.amount
      }
    });
    this.$route.query.amount
    
    彻底能够在连接后加上?进行传参 
    http://localhost:8080/?id=18
    this.$route.query.id
    
   (3) params
    this.$router.push({
      name: '确认图片',
      params: {
       amount: that.amount
      }
    })
    this.$route.params.amount 

ps：若提供了path，则params会被忽略

 $router && $route：

 $router:router实例，用于路由跳转，
(1)this.$router.push({
      path: '/payment/recharge',
      query: {
        amount: that.amount
      }
    });
(2)this.$router.push({
      name: '确认图片',
      params: {
       amount: that.amount
      }
    })
    
$route:当前激活的路由信息对象，用于获取参数，
(1)this.$route.query.amount
(2)this.$route.params.amount 

　　嵌套路由：

嵌套路由：
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

　编程式导航：：

导航方式：
（1）<router-link>建立a标签来定义导航连接（声明式导航）
（2）router.push(location, onComplete?,onAbort?) (编程式导航)
（3）router.replace(location, onComplete?,onAbort?) (编程式导航)
（3）router.go(n) (编程式导航)

 ps：想要导航到不一样的URL，则使用router.push方法，该方法会向history栈添加一个新的记录，当用户点击浏览器回退按钮时则回到以前的url。   
 该方法的参数能够是一个字符串路径或者一个描述地址的对象。router.replace不会向history添加新记录，只是替换当前的history记录。
 router.go在history记录中向前或向后后退多少步。
 
 // 字符串,路径path匹配
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由 /register/userId=123
router.push({ name: 'user', params: { id: '1' }})
// 带查询参数，变成 /register?id=1
router.push({ path: 'register', query: { id: '1' }})        
ps：若提供了path，则params会被忽略

　　命名路由：

在建立router实例的时候，在routes配置中给某个路由设置名称。
const router = new VueRouter({
    routes: [
        {
            path:'/user/:userId',
            name:'user',
            component:User
        }
    ]
})
// 连接到命名路由方式（1）给router-link的to属性传递一个对象（2）给router.push传递一个对象
<router-link :to="{name:'user', params:{userId:123}}">User</router-link>
router.push({name:'user', params: {userId:123}})

　　重定向：

重定向:
    { path: '/a', redirect: '/b' }
    { path: '/a', redirect: { name: 'foo' }}

　　导航守卫：

导航守卫：主要用来经过跳转或取消的方式守卫导航。登陆的拦截,权限的校验,等
ps：参数或查询的改变并不会触发进入或离开的导航守卫。能够经过$route对象来应对这些变化或使用beforeRouteUpdate的组件内守卫。

全局前置守卫：
const router = new VueRouter({...})
router.beforeEach((to, from, next)=>{
    next()
})
ps:必定要调用next方法来resolve这个钩子，执行效果依赖next方法的调用参数。进行管道中的下一个钩子。若是所有钩子执行完了，则导航的状态就是 confirmed 
next(false) 中断当前导航，能够判断某些条件下如url改变了则中断，url会重置到from路由对应的地址；
next('/) next({path:'/'}) 跳转到一个不一样的地址，当前导航被中断，而后进行一个新的导航；

全局后置钩子：
const router = new VueRouter({...})
router.afterEach((to, from, next)=>{
})

路由独享的守卫：
const router = new VueRouter({
    routes:[
        {
            path:'/foo',
            component:Foo,
            beforeEnter: (to, from, next) => {
                //...
            }
        }
    ]
})

组件内钩子：
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 由于当钩子执行前，组件实例还没被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，可是该组件被复用时调用
    // 举例来讲，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 因为会渲染一样的 Foo 组件，所以组件实例会被复用。而这个钩子就会在这个状况下被调用。
    // 能够访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 能够访问组件实例 `this`
  }
}



完整的导航解析流程：
导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用建立好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

　　路由元信息：

路由元信息：路由配置里的一个属性meta，其是一个对象，能够存放一些key-value，经过路由元信息meta实现不一样路由展示不一样页面（带不一样的meta信息，展现不一样页面布局）
routes 配置中的每一个路由对象为 路由记录。路由记录能够是嵌套的，所以，当一个路由匹配成功后，他可能匹配多个路由记录
例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。
一个路由匹配到的全部路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。所以，咱们须要遍历 $route.matched 来检查路由记录中的 meta 字段

直接在路由配置的时候，给每一个路由添加一个自定义的meta对象，在meta对象中能够设置一些状态，来进行一些操做。用它来作登陆校验再合适不过了。

　　路由懒加载：

路由懒加载：
当打包构建应用时，JavaScript 包会变得很是大，影响页面加载。若是咱们能把不一样路由对应的组件分割成不一样的代码块，而后当路由被访问的时候才加载对应组件，能提升页面的访问速度。
路由和组件的经常使用两种懒加载方式：
1.vue异步组件实现路由懒加载  component:resolve => (['须要加载的路由的地址',resolve]) 如component: resolve => require(['./page/linkParamsQuestion.vue'], resolve)
2.es提出的import  const HelloWorld = () => import('须要加载的模块地址')

　　

import Vue from 'vue'

import 'normalize.css/normalize.css'// A modern alternative to CSS resets
// 引入animated动画
import '@/styles/lib/animate.min.css'
import '@/styles/lib/layer.css'

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

import './styles/index.scss' // global css
import App from './App'
import router from './router'
import store from './store'
import * as allFilters from './filters/allFilters'
Object.keys(allFilters).forEach(key => {
  Vue.filter(key, allFilters[key])
})

import '@/icons' // icon
// import FastClick from 'fastclick'
// FastClick.attach(document.body);

Vue.filter('changeMemberNum', function(val) {
  return val.replace(/\s/g, '').replace(/(.{4})/g, '$1 ');
})
// import '@/permission' // permission control

// 使用代理的方式请求URLaxios request
// import Axios from 'axios'
// import VueAxios from 'vue-axios'
// Vue.use(VueAxios, Axios)

// 微信js-sdk
const $wx = require('weixin-js-sdk');
Vue.prototype.$wechat = $wx;

import VueQrcode from '@chenfengyuan/vue-qrcode';
Vue.component(VueQrcode.name, VueQrcode);

// 页面加载进度条显示NProgress
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
router.beforeEach((to, from, next) => {
  NProgress.start() // 开启Progress
  NProgress.configure({ ease: 'ease', speed: 500 }); // 配置进度条
  next();
  NProgress.done()
})
router.afterEach(() => {
  NProgress.done() // 结束Progress
})

Vue.use(MintUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

　

 参考 & 感谢：vue-router官网 & 各路大神

 https://segmentfault.com/a/1190000009651628