官方文檔

// 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)

// 1. 定義（路由）組件。
// 可以從其他文件 import 進來
const Foo = { template: ‘<div>foo</div>‘ }
const Bar = { template: ‘<div>bar</div>‘ }

// 2. 定義路由
// 每個路由應該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創建的組件構造器，
// 或者，只是一個組件配置對象。
// 我們晚點再討論嵌套路由。
const routes = [
  { path: ‘/foo‘, component: Foo },
  { path: ‘/bar‘, component: Bar }
]

// 3. 創建 router 實例，然後傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這麽簡單著吧。
const router = new VueRouter({
  routes // （縮寫）相當於 routes: routes
})

// 4. 創建和掛載根實例。
// 記得要通過 router 配置參數註入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount(‘#app‘)

// 現在，應用已經啟動了！
 

通過註入路由器，我們可以在任何組件內通過 this.$router 訪問路由器，也可以通過 this.$route 訪問當前路由：

// Home.vue
export default {
  computed: {
    username () {
      // 我們很快就會看到 `params` 是什麽
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push(‘/‘)
    }
  }
}
 

1：先下載路由
npm install vue-router --save
2：導入
import VueRouter from "vue-router"
//  定義（路由）組件。

3:
 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)
Vue.use(VueRouter)

1定制路由(組件)
// 導入路由組件
import Index from ‘./Index‘
import Luffy from ‘./Luffy‘


 // 2、創建 router 實例，然後傳 `routes` 配置

 const router = new VueRouter({
     mode: ‘history‘,
     routes:[
          { path: ‘/‘, component: Index },
           { path: ‘/luffy‘, component: Luffy }
     ]
 })

3
new Vue({
  el: ‘#app‘,
  router,   //  掛載router實例
  render: h => h(App)
})

4，在主主件寫出口
    
 
<!-- 路由出口 所有路由匹配的組件都會被渲染到這裏 -->
    <router-view></router-view> 

5：a標簽要換成router-link
       <router-link  v-for=‘(item,index) in urls‘  :to="item.href"  :class=‘{active:currentIndex==index}‘ @click.native=‘clickHandler(index)‘ >{{item.name}}</router-link>

        <!--  給router-link添加事件 會阻止click事件的觸發，需要加上.navtive就可以了。加上.navtive 才是真正點擊了a標簽的click事件，在組件中不加.native 不會觸發原生的事件。註意了註意了 -->
        <!-- <router-link to="/luffy">路飛學城</router-link> -->
      

主主件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>

        <router-link  v-for=‘(item,index) in urls‘  :to="item.href"  :class=‘{active:currentIndex==index}‘ @click.native=‘clickHandler(index)‘ >{{item.name}}</router-link>

        <!--  給router-link添加事件 會阻止click事件的觸發，需要加上.navtive就可以了。加上.navtive 才是真正點擊了a標簽的click事件，在組件中不加.native 不會觸發原生的事件。註意了註意了 -->
        <!-- <router-link to="/luffy">路飛學城</router-link> -->
      
    </ul>

    <!-- 路由出口 所有路由匹配的組件都會被渲染到這裏 -->
    <router-view></router-view> 
   
  </div>
</template>

<script>
export default {
  name: ‘app‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘,
      urls:[
        {href:‘/‘,name:"首頁"},
        {href:‘/luffy‘,name:"路飛學城"}

      ],
      currentIndex:0
    }
  },
  methods:{
    clickHandler(index){
      console.log(index)
      this.currentIndex = index;

    }
  }
}
</script>

<style>
#app {
  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
a.active{
  color: yellow;
}
</style>

子主件

<template>
    <div class="luffy">
        <h4>我是路飛</h4>
    </div>
</template>
<script>
    export default{
        name:‘luffy‘,
        data(){
            return {

            }
        }
    }
</script>
<style>
    
</style>

<template>
    <div class="index">
        <h3>我是首頁</h3>
    </div>
</template>
<script>
    export default{
        name:‘index‘,
        data(){
            return {

            }
        }
    }
</script>
<style>
    
</style>    

vue 之 vue-router