使用vue-cli 建立vue2.x專案中使用vue-router 與之前的區別

現在根據官方文件 檢視開始 ,可以看到:

HTML中

使用router-link 元件來導航,通過傳入’to’ 屬性指定連結,而<router-link> 預設會被渲染成一個<a> 標籤.

使用的連結樣式為:

<router-link to='/foo'>foo page</router-link> ,

而在之前使用的是:

<a v-link="{path:'/foo'}">foo page</a>

可以看到差別還是很大的.

在看路由出口,路由匹配到的元件將渲染在這裡:

<router-view></router-view>

在本例中則是:

JavaScript 中

在router 資料夾中,修改index.js 檔案,定義路由內容.

1. 定義(路由元件)-從其他檔案 import 進來:

   import Goods from '@/components/goods/goods'

2. 定義路由,每個路由應該對映一個元件,其中’component’可以是通過Vue.extend() 建立的元件構造器,或者只是一個元件配置物件:

   const routes = [{ path: '/foo',component: Foo},{...}]

3. 建立 router 例項,然後傳 routes 配置:

   const router = new VueRouter({
    routes // （縮寫）相當於 routes: routes
   })

4. 建立和掛載根例項.記得要通過 router 配置引數注入路由,從而讓整個應用都有路由功能:

   const app = new Vue({
    router
   }).$mount('#app')

   現在可以啟動應用啦.

   在本例中和上文的有些許不同 :

   router 資料夾下的index.js :

main.js 檔案則是:

(兩種書寫形式都可以執行).