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