<template>

  <div class="test">

    <h1>{{ msg }}</h1>

    <router-link to="/login">跳转到详情页</router-link>

  </div>

</template>

<script>

export default {

  name: 'test',

  data () {

    return {

      msg: 'this.test uve'

    }

  }

}

</script>

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

<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>

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

     <!-- 引用的组件标签 和下边 import 的名称保持一致 -->

    <test></test>

  </div>

</template>

<script>

// 引用Test.vue 命名为test

import test from './Test'

export default {

  name: 'hello',

  // 引用组件

  components:{

    test

  },

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  }

}

</script>

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

<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>