vue路由( Router ) 用法

	vue-router, vue自带的路由，下面是一些简单的操作说明：

一、安装

     1、cnpm install vue-router --save  命令进行安装

     2、在main.js或者使用vue-router的地方，通过import 来导入import vRouter from 'vue-router'

     3、Vue.use(vRouter )

     4、开始配置路由

import Vue from 'vue'
import App from './App'
import VRouter from 'vue-router'
import Apple from './components/apple'
import Banana from './components/banana'
import Redapple from './components/redapple'
//使用vue.use来注册使用VRouter插件
Vue.use(VRouter);
//这样VRouter作为一个类来使用，我们自己实例化这样的一个类
let router = new VRouter({
   mode: 'history',
  routes: [
    {
       path: '/apple/:color',//为页面设置路由参数
       component: Apple,
       //路由嵌套
       children: [
           {
             path: 'redapple',
             component: Redapple               注意：在路径上加上‘/’表示从根目录开始跳转
                                                    不加‘/’表示从当前页面进行跳转  
           },
              {
                path:'/redapple',
                component: Redapple
              }
       ]
    },
    {
       path: '/banana',
       component: Banana
    }
  ]
});
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,//将这样的router放到根目录里面
 //  es6 通过render方法来使用外部引入的App组件
 render: h => h(App)
})

二、常用的路由方式

  1、常规的路由  

var routes = [
    {
        path:"/one",

        component: a
    },
    {
        path:"/two",
        component: b
    },
]

2、嵌套路由

routes: [
     {
        path: '/apple',
        component: Apple,
        //路由嵌套
        children: [
            {
              path: 'redapple',
              component: Redapple               注意：在路径上加上‘/’表示从根目录开始跳转
                                                     不加‘/’表示从当前页面进行跳转  
            },
              {
                path:'/redapple',
                component: Redapple
              }
        ]

3、动态路由，一般适用于详情页

1 {
    path:"/two:id",
    component: b
}

 4、路由跳转的方式与传参，适合写入一些方法中：

    a、 router.push(location)

    //  字符串
  router.push('home')

//  对象
   router.push({path: 'home'})

//  命名的路由
   router.push({ name: 'user',  params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
   router.push ({ path: 'register', query: { plan: 'private' }})

b、标签跳转，其中传参的方式和上面的一样

<router-link :to="{ name: 'one'}">User</router-link>
<router-link :to="{ name: 'two'}">User</router-link>

5、路由的重定向

   重定向（Redirect）就是通过各种方法将各种网络请求重新定个方向转到其它位置，用于网站调整或网页被移到一个新地址，它也是通过routes配置来完成，下面例子是从/a 重定向到 /b, 如果a 找不到，直接跳到b:

 var router = new VueRouter({
   routes: [
     { path: '/a', redirect: '/b' }
   ]
 })

6、路由的别名

    /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。简单的说就是给 /a 起了一个外号叫做 /b ,但是本质上还是 /a。适合页面的推广：

var router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

7、路由中props传递

   {
     path: '/personal/:id',
     name: 'personal',
     component: personal,
     props: true     // 这一步非常重要
   }

页面中会直接被渲染出来

三、常用的路由方法

   1、返回上一页， 一个全局的goBack 事件

Router.prototype.goBack = function() {
 window.history.go(-1)
}

// 在浏览器记录中前进一步，等同于 history.forward()
 
   router.go(1)

// 后退一步记录，等同于 history.back()

    router.go(-1)

  // 前进 3步记录
     router.go(3)

  // 如果history 记录不够用， 那就默默地的失败呗
     router.go(-100)
     router.go(100)

2、router.replace()

    类型: boolean
     默认值: false
     设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。
        /加上replace: true后，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

 this.$router.push({path: '/home', replace: true})
   //如果是声明式就是像下面这样写：
  <router-link :to="..." replace></router-link>
   // 编程式:
   router.replace(...)

3、需要先跳转到登录的页面


将登录收的token存在localstory中。

4、路由过渡效果（App.vue）

<template>
 <div id="app" class="app">
   <transition :name='transitionName'>
    <router-view class="child-view"></router-view>
   </transition>
 </div>
</template>

<script>
export default {
 name: 'app',
 data () {
   return {
     data: 'abcd',
     info: 'nono',
     transitionName: 'slide-left'
   }
 },
 watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
   }
 },
     // 判断左右滑动
 beforeCreate () {
   console.log('创建前……')
   console.log(this.data)
   console.log(this.$el)
 },
//  created () {
//    console.log('已创建……')
//    console.log(this.info)
//    console.log(this.data)
//  },
//  beforeMount () {
//    console.log('mounted之前……')
//    console.log(this.info)
//    console.log(this.$el)
//  },
//  mounted () {
//    console.log('mounted……')
//    console.log(this.info)
//    console.log(this.$el)
//  },
//  beforeUpdate () {
//    console.log('更新前========')
//  },
//  updated () {
//    console.log('更新完成')
//  },
//  beforeDestroy () {
//    console.log('销毁前……')
//    console.log(this.info)
//    console.log(this.$el)
//  },
 destroyed () {
   console.log('已销毁……')
   console.log(this.info)
   console.log(this.$el)
 },
 beforeRouteUpdate (to, from, next) {
   let isBack = this.$router.isBack
   if (isBack) {
     this.transitionName = 'slide-right'
   } else {
     this.transitionName = 'slide-left'
   }
   this.$router.isBack = false
 }
}
</script>

<style>
 @import "./common/css/reset.css";
.app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #000;
 font-size:.14rem;
 height:2rem;
}
 .child-view {
   position: absolute;
   width:100%;
   transition: all .8s cubic-bezier(.55,0,.1,1);
 }
 .slide-left-enter, .slide-right-leave-active {
   opacity: 0;
   -webkit-transform: translate(50px, 0);
   transform: translate(50px, 0);
 }

 .slide-left-leave-active, .slide-right-enter {
   opacity: 0;
   -webkit-transform: translate(-50px, 0);
   transform: translate(-50px, 0);
 }
</style>

5、 路由的封装

import Vue from 'vue'
import Router from 'vue-router'
import {storage} from '../assets/js/utils/storage'
import routeConfig from './route.config.json';
var registerRoute = (routeConfig) => {
  let route = [];
  routeConfig.map(pages => {
    route.push({
      path: pages.path,
      name: pages.name !== undefined ? pages.name : null,
      redirect: pages.redirect !== undefined ? pages.redirect : null,
      component: require(`@/pages${pages.component}`).default,
      meta: pages.meta !== undefined ? pages.meta : null,
      children: pages.children !== undefined ? registerRoute(pages.children) : null
    })
  });

  return route;
};

var route = registerRoute(routeConfig);

Vue.use(Router)

Router.prototype.goBack = function() {
  this.isBack = true
  window.history.go(-1)
}

const routeInstance = new Router({
  routes: route
})

routeInstance.beforeEach((to, from, next) => {
  if (to.path !== '/') {
    let familyId = storage.cookie.get('familyId');
    if ((familyId !== null)) {
      next()
    } else {
      routeInstance.replace({path: '/'})
    }
  }
  next()
})

export default routeInstance