自定义一个路由：路由就像超链接，跳到别的页面

注意：vue文件全部放在src/components文件夹下

自定义一个路由（超链接）：

1、先新建一个vue项目

2、新建RouterTest.vue文件，存放路径src/compents

3、修改src/router下的index.js文件(头顶引入vue和vue-router的组件)

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


import RouterTest from '@/components/RouterTest'  //新加，在下方配置component:RouterTest才生效

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/newcontact',  // 和router-link to相呼应，导航到/newcontact
      name:'NewContact',
      component:NewContact
    },
    {
    	path:'/routerTest',  // 和router-link to相呼应，导航到/routerTest
    	name:'RouterTest',   // 和import后的名称相对应
    	component:RouterTest
    }
  ]
})

4、在原vue文件中添加如下代码，完成vue router(超链接) 

<template>
  <!--router-link to=""会把路由导航到http://localhost:8080/#/routerTest
      "router-link"属性
      1.":to" 属 性
        相当于a标签中的"herf"属性，后面跟跳转链接所用
      <router-link :to="/home">Home</router-link>
      <a href="/home">Home</a>
  -->
    <router-link to="routerTest"><h1>{{ msg }}</h1> </router-link>
</template>
<script>
export default { //ES6语法，用于输出到外部，这样就可以在其他文件内用import输入
  name: 'HelloWorld',
  data () {    //由于是组件，data必须是个函数，这是ES6写法，data后面加括号相当于data: function () {}
    return {   //记得return不然接收不到数据
      msg: '路由就像超链接' //上面的 msg 就是这里输出的
    }
  }
}
</script>
<style>
h1 {
  font-weight: normal;
}
a {
  color: #42b983;
}
</style>