vue從一個組件跳轉到另一個組件頁面router-link的試用

需求從helloworld.vue頁面跳到good.vue頁面

 

1.helloworld.vue頁面代碼

<template>
  <div class="hello">
      我是小可愛
         <router-link :to="{ path: '/cute'}" replace>點我啊,傻</router-link>
  </div>
</template>

<script>
import Good from './good'
export default {
  name: 'HelloWorld',
  components: { Good },
  data: function () {
    return { }
  },
  methods:{
    clickIt:function (){
      window.location.href="/cute"
    }
  }
}
</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>

2. good.vue頁面

<template>
  <div class="hello">
     我是你的小可愛

  </div>
</template>

<script>
export default {
  name: 'cute',
  data: function () {
    return { }
  }
}
</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>

 3.index.js

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


Vue.use(Router)

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

  ]
})