vue-cli3路由vue-router用法

安裝

npm install vue-router

導入vue-router

// main.js文件內
// 導入vue-router
import Vue from 'vue'  // vue-router是以來vue的
import VueRouter from 'vue-router'  // 導入vue-router，注意import VueRouter 不能寫成 import Vue-Router，因為不支持帶-的寫法。
// 必須要通過 Vue.use() 明確地安裝路由功能
Vue.use(VueRouter)

// main.js
// 如果使用全局的script標簽就無需使用上述導入vue-router方法手動安裝路由功能Vue.use()，而是自動安裝路由功能
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

定義組件

// main.js
// 可以自定義組件  const就是聲明常量，類似var
const Vhome = { template: '<div>自定義主頁面</div>' }
const Vusers = { template: '<div>自定義用戶頁面</div>' }

//main.js
// 也可以從其他組件導入進來
import Vhome from "./components/Vhome.vue"
import Vusers from "./components/Vusers.vue"

// components/Vhome.vue
template>
    <div class="home">
        <h1>導入home頁</h1>
    </div>
</template>

<script>
    export default{
        name: "Vhome",
        data(){
            return {

            }
        }
    }
</script>

// components/Vusers.vue
<template>
    <div class="users">
        <h1>導入用戶頁</h1>
    </div>
</template>

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

定義路由

每個路由應該映射一個組件。其中‘component’可以是通過Vue.extend()創建的組件構造器，或者只是一個組件配置對象。

// main.js
const routes = [  // const就是聲明常量，類似var
  { path: '/home', component: Vhome },
  { path: '/users', component: Vusers }
]

創建router實例

// main.js
// 配置 routes
const router = new VueRouter({
  routes // (縮寫) 相當於 routes: routes
})

創建個掛載根實例

// main.js
// 記得要通過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

使用

<template>
  <div id="app">
    <p>
      <! -- 使用router-link組件做導航，通過to導入鏈接，<router-link>會生成一個a標簽 -->
      <router-link to="/home">主頁</router-link>
      <router-link to="/users">用戶頁</router-link>
    </p>
    <! -- <router-vies>是路由出口，路由匹配到的組件都會渲染到這里，比如Vhome.vue或者Vusers.vue的內容 -->
    <router-view></router-view>  
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
    }
  }
}
</script>

結束！