vue从一个组件跳转到另一个组件页面router-link的试用

Posted 2020-11-14 周小姐

需求从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
    },

  ]
})