Как настроить роутинг в Vue.js 2?

Question

[Radiss]

"vue": "^2.6.10",
    "vue-router": "^3.0.3",

Сейчас отображается пустая стр. в браузере.

Структура простая - в папке src/components 3 файла vue (home, about,cars)

home.vue

spoiler

<template>
    <div class="home">
        <h1>Home</h1>
    </div>
</template>

<script>
export default {
    name: 'home',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

main.js

spoiler

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
//import ColorDirective from './color'
import Router from 'vue-router'
import home from '@/components/home'

Vue.directive('colored', ColorDirective)


Vue.config.productionTip = false



('#app')
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount

router.js

spoiler

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import Cars from './components/Cars.vue'
import About from './components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/about',
      name: 'about',
      component: about
    },
    {
      path: '/cars',
      name: 'cars',
      component: cars
    }
   ]
})

App.vue

spoiler

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">home Vue</router-link> |
      <router-link to="/about">About</router-link>|
        <router-link to="/cars">Cars</router-link>
    </div>
    <router-view/>
  </div>
</template>

<!--
<template>
  <div id="app">
    
    <router-view/>
  </div>
</template>-->

<script>
export default {
  name: 'App'
}
</script>
<style>
#app {
  
}
</style>

Answer 1

[Radiss]

Может, кому-то пригодится

main.js

spoiler

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './routes'


Vue.use(VueRouter)



new Vue({
  el: '#app',
  render: h => h(App),
  router
})

routes.js

spoiler

import VueRouter from 'vue-router'
import Home from './pages/Home.vue'
import Cars from './pages/Cars.vue'
import About from './pages/About.vue'




export default new VueRouter({
  routes: [
    {
      path: '',
      component: Home
    },
    {
      path: '/cars',
      component: Cars
    },
     {
      path: '/about',
      component: About
    }
  ],
  mode: 'history'
})

App.vue

spoiler

<template>
 <div class="container">
    <router-link to="/">Home </router-link> |
      <router-link to="/about">About</router-link>|
       <router-link to="/cars">Cars</router-link>
  
    <router-view>
    
    
    </router-view>
  </div>
</template>


<script>
export default {

}
</script>

src/pages/

Cars.vue (About, Home)

spoiler

<template>
  <h1>Cars page</h1>
</template>


<script>
  export default {

 }
</script>

<style scoped>

</style>

Answer 2

[0xD34F]

('#app')
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount

Как думаете - здесь всё окей?

Comments

[Radiss]

0xD34F a что здесь не так? В index.html есть бок <div id="app"></div>
В App.vue тоже

[0xD34F]

Radiss, да всё в порядке. Ну, может, кроме того, что ('#app') телепортировался со своего законного места чёрт знает куда. Поместите его после $mount. А после - забудьте про vue на ближайшие полгода минимум, и срочно приступайте к изучению js. Ваши знания языка можно смело округлить до нуля, их нет вообще.

[Radiss]

0xD34F, Мне этих знаний однако хватило, чтобы найти ошибку и запустить приложение, а ваших - не заметить основных.