概述：vue-router 是WebApp鏈接路徑管理系統。

安裝 vue-router

npm install vue-router --save-dev

路由文件 router/index.js：

import Vue from ‘vue‘                    //引入Vue
import Router from ‘vue-router‘          //引入vue-router
import Hello from ‘@/components/Hello‘   //引入Hello.vue組件

Vue.use(Pouter)  //全局使用router
export default
 
 new Router({
  routes: [
    {                    //每一個鏈接都是一個對象
      path: ‘/‘, 
      name: ‘Hello‘,     //路由名稱
      component: Hello   //對應的組件模板
    }
  ]
})

添加文件components/demo.vue：

<template>
    <div class="demo">
        <h4>{{ msg }}</h4>
    </div>
</template>

<script>
    export 
 
default {
        name: ‘demo‘,
        data() {
            return {
                 msg: ‘Hello I am demo.vue‘        
            }
        }
    }
</script>

引入demo組件：

import demo from [email protected]/demo‘

配置路由：

{
 path: ‘/demo‘,
 name: ‘demo‘
 component: demo        
}

通過以上操作，我們就有了兩個頁面，通過改變地址欄可以看到 hello.vue 頁面的內容和 demo.vue 頁面的內容，接下來我們來實現導航制作。

制作導航：

<router-link to=‘path‘>導航文字</router-link>

path為index.js中配置的path值。

通過以上代碼，我們算是了解了vue-router的基本用法，接下來我們認識子菜單的路由方法。

在App.vue頁面進行代碼編寫：

<p>導航 ：
      <router-link to="/">首頁</router-link> | 
      <router-link to="/dmoe">dmoe頁面</router-link> |
      <router-link to="/demo/Cdemo">Cdemo頁面</router-link> |
</p>

接下來編寫demo頁面：

<template>
    <div class="demo">
        <h4>{{ msg }}</h4>

        <router-view class=‘Cdemo‘><router-view>
    </div>
</template>

<script>
    export default {
        name: ‘demo‘,
        data() {
            return {
                 msg: ‘Hello I am demo.vue‘        
            }
        }
    }
</script>

router-view 給子模版提供插入的位置。

新建Cdemo組件模板：

<template>
  <div class="Cdemo">
    <h4>{{ msg }}</h4>
  </div>
</template>
<script>
export default {
  name: ‘Cdemo‘,
  data () {
    return {
      msg: ‘Hello I amCdemo‘
    }
  }
}

引入Cdemo：

import Cdemo from [email protected]/Cdemo‘

配置路由，由於Cdemo為子路由，在原有的路由配置下加入children字段：

children: {
 {path: ‘/‘,component: Cdemo}
 {path: ‘Cdemo‘,component: Cdemo} 
}

子路由在現實中使用還是比較常用的，需要熟練的掌握。

vue-router參數傳遞:

name傳值並被顯示在模板裏，路由文件中路由配置的name屬性在模板中用 $router.name 接收：

<p>{{ $route.name}}</p>

<router-link>標簽中的to屬性傳值：

<router-link :to="{name:xxx,params:{key:value}}">link</router-link>

此處需要註意to要進行綁定。name：路由配置文件中的name值。params：要傳遞的參數。

編寫App.vue頁面：

<router-link :to="{name:‘Cdemo‘,params:{username:‘momei‘}}">Cdemo</router-link>

修改路由配置：

{path:‘/Cdemo‘,name:‘Cdemo‘,component:Cdemo},

完成上面的操作之後在Cdemo.vue中進行接收。

{{$route.params.username}}

額頁面輸出momei。

多路由區域操作

建立一個新項目，打開App.vue用router-view標簽進行布局。

<router-view ></router-view>
<router-view class="fl_nav" name="left"></router-view>
<router-view class="fr_nav" name="right"></router-view>

頁面各部分引入路由：

import Hi1 from ‘@/components/Hi1‘
import Hi2 from ‘@/components/Hi2‘

配置路由：

routes: [
    {
      path: ‘/‘,
      components: {
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },{
      path: ‘/Hi‘,
      components: {
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    } 
  ]

‘/’根路徑，‘/Hi’路徑，components中，我們對三個區域定義了現實內容。

Hi1.vue頁：

<template>
    <div>
        <h4>{{ msg }}</h4> 
    </div>
</template>
 
<script>
export default {
  name: ‘hi1‘,
  data () {
    return {
      msg: ‘I am Hi1 page.‘
    }
  }
}
</script>

Hi2.vue頁：

<template>
    <div>
        <h4>{{ msg }}</h4>
    </div>
</template>
 
<script>
export default {
  name: ‘hi2‘,
  data () {
    return {
      msg: ‘I am Hi2 page.‘
    }
  }
}
</script>

在App.vue中配置link：

<router-link to="/">首頁</router-link> | 
<router-link to="/hi">Hi頁面</router-link> |

vue-router url的參數傳遞

：冒號的形式傳遞參數：首先配置index.js路由

{
    path:‘/params/:name/:cnblogs‘,
     component:Params
}

新建Params組件，頁面中輸出name和cnblogs

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>網名：{{ $route.params.name}}</p>
        <p>博客：{{ $route.params.cnblogs}}</p>
    </div>
</template>
 
<script>
export default {
  name: ‘params‘,
  data () {
    return {
      msg: ‘params page‘
    }
  }
}
</script>

App.vue加入<router-link>標簽，利用url傳值。

<router-link to="/params/墨 眉/http://www.cnblogs.com/momei/">params</router-link> |

Vue-router learning01