Vue 組件之 Router

Vue 組件之 Router

 

Vue 開發單頁應用的時候，免不了使用Vue組件。在單頁應用上如何進行組件切換？

 

結構以下圖所示：

 

主頁面包含Foo組件與Bar組件，在主頁面中能夠進行Foo與 Bar的切換

 

 

 

 

 

 

這個時候就會須要組件路由，Vue官方推薦的路由組件是Vue-Router。下面經過實例來演練 Vue-Router

 

安裝Vue-Router

npm install vue-router

 

 

定義組件

Bar.vue

<!--組件呈現模板-->

<template>

   <p>

      <ul>

            <li v-for="n in 5" v-bind:key="n">{{ n }} {{msg}}</li>

        </ul>

   </p> 

</template>

<!--es6 組件導出-->

<script>

export default {

  data:function(){

     return {

         msg:"i am Bar!"

     }

  }

}

</script>

<!--組件樣式，加了scoped後樣式僅在本組件中起做用-->

<style scoped>

  li{

      font-size:2em;

      color:red;

  }

</style>

 

Foo.vue

 

<!--組件呈現模板-->

<template>

   <p>

      <ul>

            <li v-for="n in 5" v-bind:key="n">{{ n }} {{msg}}</li>

        </ul>

   </p> 

</template>

<!--es6 組件導出-->

<script>

export default {

  data:function(){

     return {

         msg:"i am Foo!"

     }

  }

}

</script>

<!--組件樣式，加了scoped後樣式僅在本組件中起做用-->

<style scoped>

  li{

      font-size:2em;

       color:blue;

  }

</style>

 

定義路由組件映射

/**

 * Router組件

 */

import Vue from 'vue';

import VueRouter from 'vue-router';

import Foo from "./component/Foo.vue";

import Bar from "./component/Bar.vue";

//Vue使用 VueRouter

Vue.use(VueRouter);

//Router 與 組件映射

const router = new VueRouter({

    routes: [

        { path: "/foo", component: Foo },

        { path: "/bar", component: Bar }

 

    ]

});

 

export default router

 

Main函數

/* 引入vue和主頁 */

import Vue from 'vue'

import App from './App.vue'

import router from './router.js'

/* 實例化一個vue */

var app = new Vue({

    el: '#app',

    // store,

    router,

    render: h => h(App),

    created: function() {}

})

 

App.Vue

<template>

  <div style="height: 100%;" id="app">

    <router-link to="/foo">Go to Foo</router-link>

    <router-link to="/bar">Go to Bar</router-link>

    <router-view></router-view>

  </div>

</template>

Package.json 定義的 dev 與 build

 

"scripts": {

        "dev": "webpack-dev-server -d --inline --hot --env.dev",

        "build": "rimraf dist && webpack -p --progress --hide-modules"

    },

 

 

 

 

運行

npm run dev