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               注意：在路徑上加上‘/’表示從根目錄開始跳轉 21                                                      不加‘/’表示從當前頁面進行跳轉  
            },
               {
                 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