Vue router 基本設置

首先用vue cli建立專案，這裡用webpack-simple模板建立

vue init webpack-simple 專案名稱
cd 專案名稱
npm install
nom rub dev

接著安裝vue router

npm install -s vue-router

編輯器或IDE打開專案，要用Vue-router，首先到main.js檔案上方import程式碼區塊新增

import 名稱 from 'vue-router'

這裡我這樣寫

import VueRouter from 'vue-router'

接著程式碼在「import」和「new Vue({」區塊間新增

Vue.use(名稱)

因為我import的名稱是VueRouter，所以程式碼自然是新增

Vue.use(VueRouter)

接著在src新增兩個.vue檔案Products.vue和About.vue Products.vue

<template>

<h1>產品</h1>
</template>

<script>
</script>

<style>

</style>

About.vue

<template>
<h1>關於</h1>
</template>

<script>
</script>

<style>
</style>

新增完這兩個組件後，現在修改app.vue的<script>區塊註：main.js是我們專案主要負責的js 檔案，而main.js預設引入app.vue 所以我們npm run dev首頁才會看到的是app.vue

因為我們想要讓app.vue做為主頁，可以切換Products.vue和About.vue組件，所以在app.vue的<script>這樣寫

import Products from './Products'
import About from './About'
import VueRouter from 'vue-router'

引入Products、About，因為這裡要用vue-router，所以也引入VueRouter

接著在export default設定router

export default {
 router: new VueRouter({
 routes:[
 {path: '/about',component:About},
 {path: '/products',component:Products}
 ],
 }),
};

說明：設定router new一個VueRouter( )物件，而VueRouter來自我們import進來的'vue-router’

VueRouter( )內要傳入一個陣列[ ] 陣列[ ]內也是一個一個物件，每個物件是要顯示在router上的path路徑與該路徑要切換的組件component

{path:  'path路徑',component:組件}

(注意router設定了哪些組件，就要import哪些組件進來)

接著修改app.vue的<template>區塊


<router-link to="/about">About</router-link>

<router-link to="/products">Products</router-link>

<router-link>再經過vue處裡後，會轉換成<a標籤>，而to="/about"會對應我們在router設定的path路徑、組件的組合

接著，要切換來切換去的組件，在<template>區塊要有個地方安插這些動態切換的組件，這部分在<template>要用

來顯示，<router-view/>會對應到時動態切換的組件，所以app.vue全部的code是


<template>
<div>
<div class="menu">
<router-link to="/about">About</router-link>
<router-link to="/products">Products</router-link>
</div>
<router-view/>
</div>
</template>

<script>
import Products from './Products'
import About from './About'
import VueRouter from 'vue-router'

export default {
router: new VueRouter({
routes:[
{path: '/about',component:About},
{path: '/products',component:Products}
],
}),

};
</script>

<style>
</style>

完成！我們動態選擇連結，網頁路由和文字就會動態切換，實則是切換組建達成這種效果！

補充： app.vue和main.js都要import vue-router 但是Vue.use(VueRouter) 可以不寫在main.js，而是也可以寫在app.vue裡面！

Vue router 基本設置

Written by:

SimonAllen