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

  ]
})

原文地址：https://www.cnblogs.com/antyhouse/p/9157138.html