Как написать роутер в Vue? - PullRequest
Новая
       10

Как написать роутер в Vue?

0 голосов
/ 10 января 2019

Я новичок в 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/>'
})

enter image description here

Но в моем коде ничего нет? Что не так с моим кодом? Что не так с моим роутером? Как это решить? Я давно это путал. Кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 10 января 2019

Попробуйте изменить маршрут маршрута с ./home на /home

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