vue router基本使用

 

第一步:安裝 cnpm install vue-router --save  
路由配置基本語法

router下index.js引入

import Vue from "vue";
import Router from "vue-router";

import HelloWorld from "@/components/HelloWorld";
按需引入  底下會寫到懶加載路由

export default new Router({
  routers: [{
    path: "router",
    component: '',
    meta: {}
    children: [{
        path: 'router1',
        component: Router1
      },
      {
        path: 'router2',
        component: Router2
      }
    ]
  }]
})

在main.js中

import router from './router' //引入

//使用
new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

正式入代碼環節~

組件:

<template>
  <div class="router">
    <h3>路由基本使用</h3>
  </div>
</template>

<script>
export default {
  name: "router",
  data() {
    return {};
  }
};
</script>

<style scoped>
</style>

路由index.js:

import Vue from "vue";
import Router from "vue-router";

//組件
import router from "@/components/router";


Vue.use(Router);
export default new Router({
  routes: [{
    path: "/router",
    component: router,
  }]
});

路由的跳轉 

使用標簽router-link 通過to綁定到上面

<router-link to="/lifeCycle">生命周期</router-link>   直接復制
<router-link :to="vuex">vuex</router-link>           給變量 

data() {
    return {
      vuex: "/vuex",
    };
  }

定義子路由

<router-link to="/router/router1">子路由1周期</router-link>
<router-link to="/router2">子路由2img</router-link>
<router-view></router-view>

 

routes: [{
    path: "/router",
    component: router,
    children: [{
        path: 'router1',
        component: Router1
      },
      {
        path: 'router2',
        component: Router2
      }
    ]
  }]

子路由中不用加'/' 如果加了就是從根路徑跳轉

 

路由傳遞參數

1.路由中配置  獲取: this.$route.params.id

直接寫:
　　<router-link to="/router/router2/11111">子路由2img</router-link>      路由中一定別忘記了 path: 'router2/:名字',

 或者腳本:

<p @click="getDescribe('123')">子路由1周期</p>
　　methods: {
    getDescribe(id) {
      this.$router.push({
        path: `/router/router1/${id}`
      });
    }
  },
  mounted() {
    console.log(this.$route.params.id);
  }

2.params  獲取: this.$route.params.id  

    <p @click="getDescribe('222222')">子路由1周期</p>

    methods: {
    getDescribe(id) {
      this.$router.push({
        name: "router1",
        params: {
          id: id
        }
      });
    }
  },
  mounted() {
    console.log(this.$route.params.id);
  }

可以看見 地址欄參數不顯示 與query相反

 children: [{
        path: 'router1/:id',
        name: "router1",       //通過name值 params
        component: Router1
      },
      {
        path: 'router2',
        component: Router2
      }
    ]

3.query  獲取: this.$route.query.id  

直接寫:

　　<router-link :to="{path:'/router/router1',query:{id:'000'}}">子路由1周期</router-link>

  或者腳本:

<p @click="getDescribe('6666')">子路由1周期</p>
methods: {
　　getDescribe(id) {
      this.$router.push({
        path: "/router/router1",
        query: {
          id: id
        }
      });
    }
  }
//子組件
 mounted: function() {
    console.log(this.$route.query.id);
 }
注意看 現在的地址欄和上面兩種方式不同 ?= 

 

上面例舉了三種跳轉傳參 第一路由配置  第二params 第三query   注意獲取的時候是$route   沒有 r

下面三種跳轉的方法與區別:push replace go 

router.go(n)
這個方法的參數是一個整數， 意思是在 history 記錄中向前或者后退多少步， 類似 window.history.go(n)

methods:{
    next(){
        this.$router.go(1);  //前進
    },
    prevent(){
        this.$router.go(-1);  //后退
    }
}

 

router.push(location)
想要導航到不同的 URL， 則使用 router.push 方法。 這個方法會向 history 棧添加一個新的記錄， 所以， 當用戶點擊瀏覽器后退按鈕時， 則回到之前的 URL。

router.replace(location)
跟 router.push 很像， 唯一的不同就是， 它不會向 history 添加新記錄， 而是替換掉當前的 history 記錄。是當前一次哦~

 

路由的別名和重定向

別名:alias

/a 的別名是 /b，意味着，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣

export default new Router({
  routes: [{
    path: "/",
    alias: '/router',
    component: router,
  }]
});

 

重定向:redirect

“重定向”的意思是，當用戶訪問 /a時，URL 將會被替換成 /b，然后匹配路由為 /b

export default new Router({
  routes: [{
    path: "/",
    alias: '/router',
    component: router,
    redirect: '/watch'
  }, {
    path: "/watch",
    component: watch,

  }]
});

 

 router懶加載

export default new Router({
  routes: [{
    path: "/",
    alias: '/router',
    component: (resolve) => require(['@/components/router.vue'], resolve),
    children: [{
        path: 'router1/:id',
        name: "router1",
        component: Router1
      },
      {
        path: 'router2/:cy',
        component: Router2
      }
    ]
  }, {
    path: "/watch",
    component: (resolve) => require(['@/components/watch.vue'], resolve),
  }]
});

路由守衛鈎子

beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`
    // 因為當守衛執行前，組件實例還沒被創建
　　　 next(vm => {

 　　// 通過 `vm` 訪問組件實例 　　})
 }

beforeRouteUpdate (to, from, next) { 
　　// 在當前路由改變，但是該組件被復用時調用
   // 舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
   // 由於會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鈎子就會在這個情況下被調用。
   // 可以訪問組件實例 `this` 
　　next();
 }

beforeRouteLeave (to, from, next) { 
　　// 導航離開該組件的對應路由時調用 
　　// 可以訪問組件實例 `this` 
　　next()
}

路由就告一段落了~~~~~~~~~~~~by~~~