簡單寫一個路由

• 建立一個vue專案
• 結果

建立一個vue專案

• 安裝好vue-cli

npm install vue-cli -g

vue init webpack vue-demo（詢問是否新增路由的時候選y）

# 開始
* 在src components 下新增HiVue.vue
*```
<template>
<div>
<h2> {{msg}} </h2>asfdasfasf
</div>
</template>

<script>
export default {
  name: 'HI',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App Hi'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

• router下的index中的Router下新增新的router
  index 如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/HiVue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'hi',
      component: Hi
    }
  ]
})

 

• 執行npm run dev

結果

• 在位址列輸入如圖，結果如圖
•