Vue学习之二 router 1

创建一个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

结果

• 在地址栏输入如图，结果如图
•