关于vue路由router跳转的总结与问题

首先要明白vue就是用的一个个组件来组成一个界面，那么这些界面的切换就要靠router来完成一开始是加载index.html来放上App.vue作为祖组件，其他的组件都可以布置在这个祖组件上
然后我新建了Test.vue与Test2.vue

Test.vue中的是

<template>
    <div  id="name">
       <h>{{ msg1 }}</h>
    </div>
</template>
<script>
// @ is an alias to /src
export default {
  data () {
    return {
      msg1:'欢迎'
    }
  }
}
</script>

Test2.vue

<template>
    <div class="test2">
  我是Test2页面
    </div>
</template>

然后在router中来注册页面
index.js

import Vue from 'vue'
import Router from 'vue-router'
import VueRouter from 'vue-router'
Vue.use(Router)
//以下是注册页面
import HelloWorld from '@/components/HelloWorld'
import Test2 from '@/components/Test2.vue'
import Test from '@/components/Test.vue'
//配置访问的路径
const routes=[
  {
    path: '/test',
    component: Test//这里要注意
  },
    {
      path: '/HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test2',
      component: Test2
    }
  ]
//实例化vuerouter
const router=new VueRouter({
  mode:'history',
  routes
})
export default router;//将router抛出，有main.js接回

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
//导入路由
/* eslint-disable no-new */
//引入路由
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

然后在App.vue中写入router

<template>
  <div id="app">
  <img src="./assets/logo.png">
  <h>{{msg1}}</h>
  <router-view></router-view>
  <!--路由匹配到的都加在在这里-->
  <router-link :to="'/test'"><ul>Test</ul></router-link>
  <router-link to="/test2"><ul>Test2</ul></router-link>
  </div>  
</template>
<script>
</script>
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

运行结果的界面


点击Test2

关于我的错误呢是redirect与component的用法不理解造成的
我在index.js中加了一个Helloworld的重定向

  {
    path:'/goHome',
    redirect:'/HelloWorld'
   }, 

在App.vue中加了跳转的按键,点击后出现如下的界面，在Helloworld.vue中，我写进去了欢迎两个字，显示了出来

  <router-link to="/goHome"><ul>首页</ul></router-link>

要注意重定向与component的用法。。。。。。。。。。。。