Vue路由vue-router

vue 路由

     vue-router2

        注意：vue-router2@2.x只適用於Vue2.x版本

     安裝

　　由於以前在安裝vue-cli的時候選項中就包括了vue路由這一項是否yes or no安裝，因此若是要單獨安裝能夠參考下面

        1.你也能夠用 <script src="../js/vue-router.js"></script>引入這種方式，但通常用傾向於用webpack模塊化的方法

        2. npm install vue-router@2.7.0 --save-dev,爲了讓package.json中打上一個log，後面加上--save-dev

    若是在一個模塊化的工程中使用，必須經過Vue.use()明確的安裝路由功能，例如

        import Vue from 'vue';
        import VueRouter from 'vue-router';
        Vue.use(VueRouter)

 

    若是使用全局的script標籤，則無需如此（手動安裝） 

重定向

    重定向也是經過routes配置來完成，下面就是/a到/b

        const router = new VueRouter({
            routes:[{
                path:'/a',redirect:'/b'
            }]
        })

 

    重定向也能夠是命名的路由,

        const router = new VueRouter({
            routes:[{
                path:'/a',
　　　　　　　　　　name:'foo',
　　　　　　　　　　redirect:{name:'foo'}
            }]
        })

 

    或者一個方法

        const router = new VueRouter({
            routes:[{
                path:'/a',redirect:to=>{
                    //方法接收 目標路由 做爲參數
                    //return 重定向 字符串路徑或者路徑對象
                }
            }]
        })

 

    在template標籤中，可使用標籤router-link進行跳轉到相應的vue組件

<router-link to="/card">card</router-link>

 

    或者js methods方式跳轉，這裏是一個示例，能夠結合下面的動態路由匹配一塊兒進行

import router from '../router';//這裏/index.js能夠省略不用寫。

      handleClick:function(index){
        //你須要router引用進來，才能進行跳轉
          router.push(`/card/detail/${index}`);//es6反向引號寫法，
      }

 

動態路由匹配

     點擊事件

        handleClick:function(index){

            //你須要router引用進來，才能進行跳轉

          router.push(`/card/detail/${index}`);//es6反向引號寫法，

        }

    佔位id符號：  path:'/card/detail/:id',先後兩個id命名要匹配，不然沒法接收到id值

    接收id值：  {{$route.params.id}}，

src文件夾下面的components文件下的card.vue組件的代碼

<template>
  <div>
      我是card頁面
      <ul>
        <li v-for="(data,index) in datalist" @click="handleClick(index)">{{data}}</li>
      </ul>
      <router-view></router-view>
  </div>
</template>

<script>
import router from '../router';//這裏/index.js能夠省略不用寫。
export default {
    name:'card',
    data(){
      return {
        datalist:['card1','card2','card3',]
        };
    },
    methods: {
      handleClick:function(index){
        //你須要router引用進來，才能進行跳轉
          router.push(`/card/detail/${index}`);//es6反向引號寫法，
      }
    },
}
</script>

<style>
  li{list-style: none;cursor: pointer;;}
</style>

在須要接收傳過來的動態參數的detail界面的代碼

<template>
  <div>
      detail界面{{$route.params.id}}這裏是接收詳細按鈕傳過來的id值
  </div>
</template>

<script>
export default {
    name:'detail',
}
</script>

<style>

</style>

在src文件夾下面的router文件夾的index.js文件的routes添加路徑，子組件，而且引用全部文件的路徑

　　　　import Film from '@/components/film'

　　　　import Card from '@/components/card'

　　　　import Home from '@/components/home'

　　　　import NowPlaying from '@/components/nowplaying'

　　　　import ComingSoon from '@/components/comingsoon'

　　　　import Detail from '@/components/detail'

　　　　......

    {
      path:'/card',
      component:Card,
      children:[
        {
          path:'/card/detail/:id',//動態路由匹配的寫法/:id這裏只起到佔位的做用，也能夠添加多個佔位符
          component:Detail
        }
      ]
    },

 

HTML5 history模式

　　

export default new Router({
  mode:'history',
})

    vue-router默認hash模式--使用URL的hash來模擬一個完整的URL，因而當URL改變時，頁面不會從新加載。

    若是不想要很醜的hash模式，咱們也能夠用路由的history模式，這種模式充分利用history.pushState API來完成URL的跳轉無須從新加載頁面，

    在index.js下面的router下面加入mode:'history',這樣就去掉了地址欄中的#符號,

    不過這種模式要玩好，還須要後臺的配置支持，由於咱們的應用是個單頁客戶端應用，若是後臺沒有正確的配置，當用戶在瀏覽器直接訪問http://oursite.com/user/id就會跳出404，這樣的體驗就很差了。

    因此呢，你要在服務器端增長一個覆蓋全部狀況的候選資源：若是URL匹配不到任何的靜態資源，則應該返回同一個index.html頁面，這個頁面就是你app依賴的頁面。