Vue 路由

時間 2019-11-24

原文原文鏈接

路由 html

https://router.vuejs.org/zh-cn/advanced/navigation-guards.htmlvue

// 將路由加入全局。固然你也可使用 this.$router 來調用實例
window.router = router;

//跳轉
router.push("bar")

//配置路由參數
{path:'/order/:id',component:require('./views/orderDetails')}

//在<template>中獲取參數
{{$route.params.id}}

//在script中獲取參數
console.log(this.$route.params.id)

router.js正則表達式

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) /* 配置路由規則 */ const map = [ // 重定向
    {path:'/index',redirect: '/'}, // 路由根路徑
    {path:'/',component:require('./views/index'), // 定義子路由
 children:[ {path:'/order',component:require('./views/order')}, {path:'/card',component:require('./views/card')}, {path:'/add',component:require('./views/add')}, {path:'/form',component:require('./views/form')}, {path:'/repay',component:require('./views/repay')}, {path:'/protocol',component:require('./views/protocol')} ] }, // 正常路由
    {path:'/order/:id',component:require('./views/orderDetails')} ] /* 實例化路由 */ const router = new VueRouter({ routes : map }) router.afterEach((to, from) => { //console.log(to, from)
}) export default router;

main.jsvue-router

import Vue from 'vue' import router from './router'         //路由相關
window.router = router;               //路由文件

const app = new Vue({ router }).$mount('#app')

根目錄index.html，添加一個div#app 標籤。vuex

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-test</title>
  </head>
  <style> body,html{margin:0;padding:0;}
  </style>
  <body>
      <div id="app">
        <transition name="fade">
            <router-view ></router-view>
        </transition>
    </div>
  </body>
</html>

index.vue 演示子路由app

<template>
  <div class="hello container">
    <nav-header :_title="mytitle" :left="false"></nav-header> 
    <div class="mui-content">
       <router-link to="order">order</router-link>
      
  <transition name="fade"> <router-view keep-alive></router-view> </transition>  
     </div>
  </div>
</template>

擴展：演示懶加載路由動畫

http://router.vuejs.org/zh-cn/advanced/lazy-loading.htmlui

const Foo = resolve => require(['./Foo.vue'], resolve)

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

擴展：組件中的路由鉤子this

beforeRouteEnter (to, from, next) {
  next(vm => {
    vm.backPath = from.path
  })
}

beforeRouteLeave  (to, from, next) {
    window.clearInterval(this.getMaxTimer);
    next();
},

擴展：在默認的狀況下當<router-link>對應的路由匹配成時，就會自動設置class屬性值爲.router-link-active，固然能夠自定義本身喜歡的類名，好比fuck-activespa

常見的使用場景是在網頁底部的tab-tag中。

<router-link :to="{name: 'Home'}" tag='li' active-class='fuck-active'>
  <div><img src="../assets/images/home.png"></div>
  <div>首頁</div>
</router-link>

# 但每一個tab-tag都寫上就不夠DRY了。有一個技巧是在VueRouter的全局配置中書寫，但請斟酌：
const router = new VueRouter({
  // ...other prototype
  linkActiveClass: 'fuck-active'
})

路由可選參數的坑：

# 若是該參數是動態的數值，直接加入‘？’便可
/houseBusinessDetails/:id？

# 但若是是固定的數值，則須要加入()?才能夠
/houseBusinessDetails/(id)?/:id？

# 正則表達式加可選參數
/myBusiness/:tag([0-2]?)

讓路由與狀態融合的插件：vuex-router-sync

import { sync } from 'vuex-router-sync'
import router from './router'
sync(store, router)

把 vue-router 的狀態放進 vuex 的 state 中，這樣就能夠透過改變 state 來進行路由的一些操做

import * as type from './mutation-types.js'

const mutations = {
    [type.IS_LOADING] (state, b) {
        console.log(state.route)  // 打印出路由的實例，那麼咱們就能夠經過它來改變路由地址，隨心所欲了
        state.is_loading = b;
    }
}
export default mutations;

經常使用的組件內的路由鉤子

beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.path === '/myBusiness') vm.$router.push('/')
      next()
    })
}

路由使用

// 路由超連接   ,注意這個to，若是是純字符串的時候直接to="xxxx"，若是是變量的時候再使用:to

　<router-link :to=backPath :class=backPath ></router-link> 

//加入全局變量，這樣才能在其餘地方調用
window.router = router

//跳轉
router.push("bar")

//可使用afterEach + vuex 來實現動態獲取後退頁面的地址
router.afterEach((to, from) => {
   console.log(to, from)
})

//可使用beforeEach 來攔截頁面  而且進行一些操做以後再放行next()
router.beforeEach((to,from,next) => {
  console.log(to,from);
  next(); //放行
})

//children子路由,當咱們在order頁面中加入 <router-view> 時，orderDetails 頁面 會從該 <router-view> 中進出
　{

      path:'/order',component:require('./views/order'),
　　children:[
　　　　{path:':id',component:require('./views/orderDetails')}
　　] 
　}  

　/*  再來一個子路由的demo: 

      上面的demo中，不知爲什麼？若是直接寫上:id ，會直接將子路由配置的頁面顯示在父頁面中。

       因此我換成這個demo的就能夠了。只有等我點擊纔出如今父頁面. */

　{path:'/astro',component:require('./views/astro/index'),children:[{path:'/astro/:consName',component:require('./views/astro/info')}]}

 

  // 監聽路由頁面進入事件

  beforeRouteEnter:(to, from, next) => {
　　　　// 在渲染該組件的對應路由被 confirm 前調用
　　　　// 不！能！獲取組件實例 `this`
　　　　// 由於當鉤子執行前，組件實例還沒被建立
　　　　next( vm => {
　　　　　　vm.$parent.route_pipe(true);
　　　　});
  },

  // 監聽路由頁面的退出事件  

  beforeRouteLeave (to, from, next) {
　　　　console.log(this); 
　　　　next(); 
  },

//若是兩個頁面都是經過同一個 <router-view> 進出，那麼他們的動畫事件（enter/leave）會同時觸發，儘管某些場景下能實現華麗的效果。
//但某些場景你不想被混淆，譬如層層嵌套的界面：index->order->orderDetails.相似這種頁面結構，應該使用嵌套路由 + chilren路由配置，參考上面的子路由demo

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。