vue路由总结

      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、常规的路由    

 1 var routes = [
 2     {
 3         path:"/one",
 4 
 5         component: a
 6     },
 7     {
 8         path:"/two",
 9         component: b
10     },
11 ]

 

       2、嵌套路由

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

    

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

{
    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'
    }
  },
 19   watch: {
 20    '$route' (to, from) {
 21      const toDepth = to.path.split('/').length
 22      const fromDepth = from.path.split('/').length
 23      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
 24     }
 25   },
      // 判断左右滑动

  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