main.js:

1、先在專案安裝路由模組：npm install vue-router --save-dev
2、使用路由：main.js首先要引用vue模組：

import Vue from 'vue'

3、再引用路由模組：

import VueRouter from ‘vue-router’

4、使用VueRouter：

Vue.use(VueRouter)

5、配置路由：

import Home from './components/home' /父級元件

import HelloWorld from './components/HelloWorld' /子元件

const router = new VueRouter({

    routes:[

        {path:‘/’,component:Home}//主頁地址

        {path:‘/helloworld’,component:HelloWorld}//地址

    ]，
　　　　 mode：‘history’　　//新增這個屬性後頁面地址就不存在#/的問題

})

6、引用配置好的路由router：

new Vue({

   router,
　　el:'#app'

   components: { App },//這是根元件
　　templater:'<App/>'

})

根目錄：這裡是App.vue

7、找到路徑後，在根元件展示：

<router-view></router-view>

此時重新整理介面頁面地址變成http://localhost:8080/#/，

當在地址輸入http://localhost:8080/#/helloworld，就會跳轉到helloworld這個介面

7、寫到這裡就可以使用a標籤跳轉了

但是會重新整理介面

根目錄：App.vue

<templater>

    <div id='app'>

        <router-view></router-view>

        <ul>
　　　　　　<li><a href='/'>home</a></li>　　//href的地址必須是配置路由的地址

          <li><a href='/helloworld'>hello</a></li>　　//href的地址必須是配置路由的地址
　　　　 </ul>　　

    </div>

</templater>

8、路由跳轉：

不會重新整理介面，高效率！

<templater>

    <div id='app'>

        <router-view></router-view>

        <ul>
　　　　　　<li><router-link to='/'>home</router-link></li>　　//href的地址必須是配置路由的地址

          <li><router-link to='/helloworld'>hello</router-link></li>　　//href的地址必須是配置路由的地址
　　　　 </ul>　　

    </div>

</templater>