Vue之Router

Vue之Router

單頁面應用，必需要會vue裏的插件

vue的官網上有個生態系統--核心插件：   Vue Router   和      Vuex

安裝

官網安裝提供了多種安裝方法，咱們使用npm install vue-router --save ，它是項目依賴因此要--save

使用

若是在一個模塊化工程中使用它，必需要經過 Vue.use() 明確地安裝路由功能

mian.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

// 1. 定義 (路由) 組件。
// 能夠從其餘文件 import 進來
import Vmain from './components/Vmain.vue'
import Vcourse from './components/Vcourse.vue'
import Vmarked from './components/Vmarked.vue' Vue.use(VueRouter)


// 2. 定義路由對象，每個路由應該映射一個組件，還能夠傳其它配置參數
const router = new VueRouter({
    mode: 'history', //去掉uri的#號，詳情看官網
    routes:[
    { path: '/', component: Vmain },
    { path: '/course', component: Vcourse },
    { path: '/mark', component: Vmarked }
    ]
})


new Vue({
  el: '#app',
  // 3. 建立和掛載根實例。
  // 記得要經過 router 配置參數注入路由，
  // 從而讓整個應用都有路由功能
  router, // 優雅的寫法，(縮寫) 至關於 routes: routes
  render: h => h(App)
})

App.vue

<template>
    <div id="app">
      <p>
        <!-- 4 -->
        <!-- 使用 router-link 組件來導航. -->
        <!-- 經過傳入 `to` 屬性指定連接. -->
        <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
        <router-link to="/">首頁</router-link>
        <router-link to="/course">課程</router-link>
        <router-link to="/mark">Markdown</router-link>
      </p>
      <!-- 5 路由出口 -->
      <!-- 路由匹配到的組件將渲染在這裏 -->
      <router-view></router-view>
    </div>
</template>
<script>

    export default {
        name:'App',     
        data(){             
            return {

            }
        },
    }

</script>
<style>

</style>

Vmain.vue  

<template>
    <div class="main">
        首頁
    </div>
</template>
<script>

    export default {
        name:'Vmain',     
        data(){             
            return {

            }
        },
    }
    
</script>
<style>

</style>

Vcourse.vue

<template>
    <div class="course">
        課程
    </div>
</template>
<script>

    export default {
        name:'Vcourse',     
        data(){             
            return {

            }
        },
    }
    
</script>
<style>

</style>

Vmarked

<template>
    <div class="marked">
        編輯器
    </div>
</template>
<script>

    export default {
        name:'Vmarked',     
        data(){             
            return {

            }
        },
    }
    
</script>
<style>

</style>