Vue实现简单路由跳转

1. 新建一个项目

---

2. 在components中新建一个文件 这里是test1.vue，内容如下

---

<template>
    <div>this is 2</div>
</template>
<script>
export default {
    name:'test1'
}
</script>

3. 在router—>index.js中注册 test1.vue组件 --内容如下（整个文件）

---

 import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test1 from '@/components/test1'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/to2',
      name: 'test1',
      component: test1
  }

  ]
})

4. 清空HelloWorld.vue文件原内容，输入如下内容

---

<template>
 <div>
  this is 1
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

效果图

---