Почему не работает роутинг у vue?

Question

[Genri_Rus]

В чем может быть проблема ?

https://codepen.io/Genri_Rus/pen/dybEoMv

Везде теги vue

Answer 1

[Варлам Ерофеич]

Спасибо Алексею, но русский вариант "доков" было гораздо веселей читать:

Разберём код автора:

//var Vue = require('vue')
     // это вариант автора genri. если раскомментировать - сломается.

//var VueRouter = require('vue-router').default 
     // это вариант автора genri. если раскомментировать - сломается.

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// Vue.use(VueRouter)
     // эта строка не мешает, если будет нужна - пожалуйста...

const router = new VueRouter({
//  mode: 'history', 
     // и без этой строки сможем обойтись.
  routes: [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
  ]
})

const app = new Vue({ el: '#app', router: router })
     // это вариант автора genri. как видим, он рабочий. 

//const app = new Vue({router}).$mount('#app') 
     // это тоже рабочий, шаблонный вариант.

Форк от автора с комментами в скрипте:

Comments

[Genri_Rus]

Спасибо большое

А допустим у меня в index.html выводится главная страница, для роутинга мне придётся создавать home.vue

И потом по клику на ссылку home выводить главную страницу ?

Или можно создать home.vue и в index.html ей просто import сделать ?

[Варлам Ерофеич]

Вот здесь нужно прочесть: Режим HTML5 History
Да и вообще на этом сайте всё доступно описано. Главное - вникнуть пошагово во все операции. )))
- И да, частенько придётся использовать вот такие длинные "портянки" текста:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = {
  template: `
    <div class="home">
      <h2>Home</h2>
      <p>hello</p>
    </div>
  `
}

const Parent = {
  data () {
    return {
      transitionName: 'slide-left'
    }
  },
  beforeRouteUpdate (to, from, next) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    next()
  },
  template: `
    <div class="parent">
      <h2>Parent</h2>
      <transition :name="transitionName">
        <router-view class="child-view"></router-view>
      </transition>
    </div>
  `
}

const Default = { template: '<div class="default">default</div>' }
const Foo = { template: '<div class="foo">foo</div>' }
const Bar = { template: '<div class="bar">bar</div>' }

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', component: Home },
    { path: '/parent', component: Parent,
      children: [
        { path: '', component: Default },
        { path: 'foo', component: Foo },
        { path: 'bar', component: Bar }
      ]
    }
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <h1>Transitions</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/parent">/parent</router-link></li>
        <li><router-link to="/parent/foo">/parent/foo</router-link></li>
        <li><router-link to="/parent/bar">/parent/bar</router-link></li>
      </ul>
      <transition name="fade" mode="out-in">
        <router-view class="view"></router-view>
      </transition>
    </div>
  `
}).$mount('#app')

[Genri_Rus]

Варлам Ерофеич, а что нужно использовать взамен require ?

var Home = require('./views/Home.vue')
var Service = require('./views/Service.vue')

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history', 
    routes: [
      { path: '/', component: Home },
      { path: '/service ', component: Service }
      ]
    })
new Vue({
  el: '#app',
  router: router
})

[Варлам Ерофеич]

Genri_Rus, во-первых, мы уже успели заметить, что переменную "var" нигде (или почти нигде) в vue не используют.
Пример:

const express = require('express')
const rewrite = require('express-urlrewrite')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const WebpackConfig = require('./webpack.config')

const app = express()

app.use(
  webpackDevMiddleware(webpack(WebpackConfig), {
    publicPath: '/__build__/',
    stats: {
      colors: true,
      chunks: false
    }
  })
)

const fs = require('fs')
const path = require('path')

fs.readdirSync(__dirname).forEach(file => {
  if (fs.statSync(path.join(__dirname, file)).isDirectory()) {
    app.use(rewrite('/' + file + '/*', '/' + file + '/index.html'))
  }
})

app.use(express.static(__dirname))

const port = process.env.PORT || 8080
module.exports = app.listen(port, () => {
  console.log(`Server listening on http://localhost:${port}, Ctrl+C to stop`)
})

Далее: На гитхабе у них есть уйма примеров вот по этому адресу. Открывай каждый пример по очереди и читай их коды.
Я и то уже многие примеры частично "обозрел", хотя мне это не совсем в тему... )))

[Варлам Ерофеич]

Genri_Rus, основные причины отказа от "var" описаны в статье Var, let или const? Проблемы областей видимости... на хабре.

[Genri_Rus]

Варлам Ерофеич, спасибо, а если у меня нету webpack и можно ли просто такое реализовать ?

[Варлам Ерофеич]

Genri_Rus, это будет совсем не то, что надо. получится обычная статическая страница, которая ничего не может. Основная мощь - это динамические компоненты, позволяющие юзерам иметь свои блоги, страницы, посты, ими написанные, музыку, фото и картинки, также иные художества. Возьмём хотя бы те же "песочницы", - там столько наворотов, что парой-тройкой скриптов никак не отделаешься... )))

[Genri_Rus]

Варлам Ерофеич, получается без webpack vue невозможно использовать ?

[Варлам Ерофеич]

Genri_Rus, что нам нужно для полного "счастья":
1. Документация на русском - есть.
2. Описание инсталляции - есть.
Осталось хостинг найти и сервак развернуть... )))

[Genri_Rus]

Варлам Ерофеич, ну если приложение компилируется, то на выходе будут js файлы, которые будут работать на простом сайте, без всяких apache и вебпаков

Почему я просто не могу подключить requirejs в свой index.html и просто пользоваться vue для тренировки ?

Неужели нету альтернатив ?

bundle.js наверно альтернатива, т.к. мне ошибок в консоли require исчезают

[Варлам Ерофеич]

Genri_Rus, я пробовал "Бегет". Начинать там можно бесплатно, но это не совсем удобно. Всё равно когда-то придётся платить. А апач и какая-нибудь пародия на sql присутствуют везде. Какие сайты мы можем иметь?
Без доступа к корневой директории? Без возможности развернуть там свой CMS... (?) Даже Вёрд... (?)
Хотя и он требует и апача и sql...

[Genri_Rus]

Варлам Ерофеич, так все таки, ради интереса - можно ли небольшой пример, как запустить локально vue ?

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

Так все работает, а вот если так, то нет:

var Home = require('./views/Home.vue')
var Service = require('./views/Service.vue')

В консоли ругается на require, но я решил подключить requirejs, но опять мне вылезло куча ошибок

Поставил bundle.js и ошибка в консоли исчезла, это вебпака скрипт ?

[Варлам Ерофеич]

Я же давал ссылку на статью про var. Настоятельно рекомендую прочесть.
Надо пробовать хотя бы так:
const Home = require('./views/Home.vue')
(или примерно так)))

[Genri_Rus]

Варлам Ерофеич, оно не работает, хоть var, хоть const - без разницы !

[Варлам Ерофеич]

Genri_Rus, а физически корневая директория где расположена? Где лежит папка "views"?

[Genri_Rus]

Варлам Ерофеич, templates/views

Там уже сами расширения .vue

var Home = require('./views/Home.vue')
var Service = require('./views/Service.vue')

[Варлам Ерофеич]

Genri_Rus, - не, я хочу знать полный путь до настоящего файла. Где лежит ваще та корневая директория и существует ли она на самом деле?
(если я разворачивал Денвер у себя на компе, то я указывал настоящий физический адрес в каталоге винды)

[Genri_Rus]

Варлам Ерофеич, C:\Users\User\Desktop\project\templates\views

Внутри views все шаблоны

[Варлам Ерофеич]

Genri_Rus, - Во-от. теперь нам нужен Денвер или иной сервак, чтобы соорудить корневую директорию для сетевого адреса типа www.gen.ru/index.html где первой папкой будет "www"

[Genri_Rus]

Варлам Ерофеич, а вы про скрипт bundle.js ничего не слышали ?

Он у меня убирает ошибки в консоли, а именно require

[Варлам Ерофеич]

Genri_Rus, Залип на хабре, читая про бундле, нпм, бабел, и т. д.... ))))))
ну то, что индекс.пшп сменили на индекс.скрипт, - это понятно.
Значит, надо полагать, что вместе с физическим адресом C:\Users\User\Desktop\project\templates\views
эти скрипты уже сделали нечто подобное https://genri.ru/templates/views/ и сервак уже существует, собранный на ноде и реактах... (?)
По аналогии с index.php - тогда и index.js должен уметь собирать динамические html-странички прямо на сервере прежде, чем послать их браузеру пользователя.

[Genri_Rus]

Варлам Ерофеич, просто посмотрите исходник с bundle.js https://github.com/GitHubTochkaDev/vuejs-tutorials...

Я себе скачал, открыл index.html и роутинг работает без ошибок

Однако есть одна проблема, # не убираются таким способом

Я писал mode: 'history', но ничего не менялось

[Genri_Rus]

Варлам Ерофеич, что можете прокомментировать поэтому поводу ?

[Варлам Ерофеич]

Genri_Rus, - Да, я тоже скачал. А не работала она по одной простой причине.
Семейству браузеров запрещено самостоятельно распоряжаться в файловой системе винды.
А вот когда появились ноде, вебпак и бундле, - тогда и пошло дело... )))

[Genri_Rus]

Варлам Ерофеич, ну бундле там подключена по-умолчанию, а # все равно не убираются

[Варлам Ерофеич]

Genri_Rus, хоть времени и много прошло, но я-таки тоже заинтересовался этой темой и хотел спросить, как продвигается наш вопрос... (?)
В коде

new Vue({
  el: '#app',
  router: router
})

предполагается не класс "app", а идентификатор id "#app", которого, возможно, нет в вашем html-коде, поэтому "#app" воспринимается, как ошибка, или:
© Для страниц, которые хотят выполнять встроенные require()вызовы, лучше всего вложить их в require()вызов конфигурации:

<script src="scripts/require.js"></script>
<script>
require(['scripts/config'], function() {
    // Конфигурация загружена, теперь можно безопасно выполнять другие 
    // требуемые вызовы, которые зависят от этой конфигурации.
    require(['foo'], function(foo) {

    });
});
</script>

[Genri_Rus]

Варлам Ерофеич, доброго времени суток

Насколько я понял, то без вебпака или галпа полноценно vue работать не будет

Видимо в vue очень много библиотек должно быть предустановлено, в том числе и касающиеся серверной части