如何在Vue中编写路由器？

Question

我是vue的新手，现在我对vue有一个简单的用法。

<template>
  <div>
   .......
  </div>
</template>

<script>
    export default {
      data(){

    .......
      }

    }
</script>

<template>
    <div>
     .......
    </div>
</template>
<script>
    export default{
      data(){
       ....
      }
    }
</script>

以上是两个组成部分。  以下是我的App.vue和路由器：

    import Vue from "vue";
    import VueRouter from "vue-router";
    import home from "@/components/home.vue";
    import about from "@/components/about.vue";
    Vue.use(VueRouter);
    export default new Router({
      routes : [
        {
          path:"./home",
          component:home
        },
        {
          path:"./about",
          component:about
        },
      ]
    })
<template>
    <div id = "app">
      <img src="./assets/logo.png">
      <header>
        <router-link to="/home">Home</router-link>
        <router-link to="/about">About</router-link>
      </header>
      <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: ""
    }
</script>

这是我的main.js：

 import Vue from 'vue'
    import App from './App.vue'
    import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

但是我的代码没有任何内容吗？ 我的代码有什么问题我的路由器有问题吗？怎么解决呢？我已经很困惑了，有人可以帮我吗？

Answer 1

尝试将路由路径从./home更改为/home

routes : [
    {
      path:"/home",
      component: home
    },
    {
      path:"/about",
      component: about
    },
  ]