Vue-router не хочет работать

@Hany · Регистрация: 30.04.2017

Студворк — интернет-сервис помощи студентам

Собственно идея такая, по нажатию кнопки должна отображаться страница /contacts
но по ходу vue-router не подключен или работает не так как надо

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.....
   <a href="/contacts" class="contact" v-on:click="makeActive('contact')">Контакты</a>
      <header>
        <div id="app" class="header-wrapper">
 
          <nav>
            <router-link to="/contacts">+ Контакты</router-link>
              <router-view></router-view>
          </nav>
        </div>
      </header>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="route.js"> </script>
.....

файл "route.js"

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Vue = require('vue')
var Contacts = require('./view/Contacts.vue')
 
Vue.use(VueRouter)
 
var router = new VueRouter({
  routes: [
    { path: '/contacts', component: Contacts }
  ]
})
 
new Vue({
  el: '#app',
  router: router
})

Файл Contacts.vue

JavaScript
1
2
3
4
5
<template>
  <section class="contacts">
    <h2>Контакты</h2>
  </section>
</template>

По идее должна отобразиться страница с контактами, тут 2 строчки кода, но чет не работает
Подскажите, пожалуйста, в чем проблема

@Zuzik · 06.01.2018, 15:50

1) В консоли какие либо ошибки появляются?
2) Как я понимаю вы все делаете подключая жс файлы напрямую , безо всяких вебпаков и т.п.? .vue файлы при таком сценарии использования, насколько я знаю не работают.

Добавлено через 2 минуты

Все эти недостатки решаются однофайловыми компонентами с расширением .vue, использование которых позволяют такие инструменты как Webpack и Browserify.

https://ru.vuejs.org/v2/guide/... nents.html

@Hany · 06.01.2018, 19:06 **[ТС]**

в консоли ошибок нет
верно, подключаю внешние файлы напрямую

Добавлено через 1 час 30 минут
Немного не то, роуты же не работают, а по идее должны
вот еще проще пример

HTML5
1
2
3
4
5
6
7
8
9
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
 
<script src="main.js"> </script>
<div id="app">
  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <router-view></router-view>
</div>

Файл main.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const Home = { template: '<div>Home</div>' }
const Foo = { template: '<div>Foo</div>' }
 
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
})
 
new Vue({
    router,
  el: '#app',
  data: {
    msg: 'Hello World'
  }
})

В данном случае тоже не отрабатывает роут и нет тут файлов .vue

@Zuzik · 06.01.2018, 21:09

Читайте документацию немного внимательнее. Подключение жс скрипта с приложением должно быть после дива в котором оно инициализируется, т.е. строчку 4 нужно переместить после 9

Новые блоги и статьи Все статьи Все блоги /
Rust и квантовые вычисления: интеграция с Q# и Qiskit golander 01.06.2025 Мир квантовых вычислений традиционно оставался закрытым клубом для высокоуровневых языков типа Python и специализированных DSL вроде Q#. Однако в последние годы Rust начал тихую революцию в этой. . .	Кэш REDIS и C# UnmanagedCoder 01.06.2025 Redis (Remote Dictionary Server) - это ультраскоростное хранилище данных в оперативной памяти, работающее по принципу "ключ-значение". Суть проста: данные хранятся не на диске, а прямо в RAM, что. . .	Lenovo IH110CX Rev 1.0 user manual Maks 01.06.2025	Размещения без повторений VistaSV30 31.05.2025 Код возвращает список вариантов размещений A^{k}_{n}=\frac{n!}{(n-k)!} from itertools import permutations def pwr(k, n): # Размещение без повторений (Placement without repetition) if k. . .	Redis и Node.js с TypeScript - решения для высоконагруженных систем Reangularity 31.05.2025 Redis (Remote Dictionary Server) — сверхбыстрое хранилище данных в памяти, способное обрабатывать операции за микросекунды. И что особенно важно для нас — с удивительно простым API. А теперь. . .
Unit-тестирование с моками в Go golander 31.05.2025 Большинство разработчиков предпочитают тестировать код без использования моков. Например, при интеграции с Elasticsearch логичнее запустить контейнер локально и тестировать Go-код непосредственно с. . .	Как работать с PDF в C# stackOverflow 31.05.2025 Нам приходится сталкиваться с PDF по разным причинам. Генерация счетов, создание отчетов, извлечение данных из загруженных пользователем документов, автоматизация рабочих процесов - это лишь верхушка. . .	Двухбуквенные коды стран в шифровании. russiannick 31.05.2025 Человечество издревле манила возможность замены сочетаний букв вымышленными символами, делающие сообщение понятным только для посвещенных. Настала пора внести в это свой вклад. Двухбуквенные коды. . .	Мой опыт в исправлении ошибки приложения Boinc в части заряда батареи смартфона. Programma_Boinc 31.05.2025 Мой опыт в исправлении ошибки приложения Boinc в части заряда батареи смартфона. Хотел бы поделиться опытом в исправлении ошибки приложения в части заряда батареи смартфона. Сразу скажу, что. . .	Добро пожаловать на конкурс PrimeGrid, посвященный 20-летию PrimeGrid Programma_Boinc 31.05.2025 Добро пожаловать на конкурс PrimeGrid, посвященный 20-летию PrimeGrid: 5-дневный обобщенный поиск простых чисел Ферма n = 20 с 12 июня 20:20 UTC по 17 июня 20:20 UTC. 12 июня 2005 года. . .

@Zuzik 298 / 256 / 57 Регистрация: 11.06.2012 Сообщений: 1,557
	06.01.2018, 21:09
	Сообщение было отмечено Hany как решение Решение Читайте документацию немного внимательнее. Подключение жс скрипта с приложением должно быть после дива в котором оно инициализируется, т.е. строчку 4 нужно переместить после 9 1

Vue-router не хочет работать

Решение