Vue-router how to link to new page?

Question

Vue.js

Good afternoon. The router navigates to another component page (URl changes), but the new page is not displayed.
index.html

<section id="app-pro">     
      <router-view></router-view>
</section>

main.js

import AppPro from './AppPro.vue'
import PageSmeta from './components/PageSmeta.vue'

Vue.use(VueRouter)

Vue.component('PageSmeta', PageSmeta);

const routes = [
  { path: '/pagesmeta', component: PageSmeta}
]

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app-pro',
  render: h => h(AppPro),
  router
}).$mount('#app-pro')

AppPro.vue

<router-link to="/pagesmeta">Smeta Router</router-link>

PageSmeta.vue

<template>
  <h1>Smeta</h1>
</template>

Answer 1

<section id="app-pro">     
      <router-view></router-view>
</section>

new Vue({
  el: '#app-pro',
  render: h => h(AppPro),
  router
}).$mount('#app-pro')

Do you even understand what you wrote here? The question is rhetorical - of course not, you don't understand. Open the documentation and read - what is render , el and $mount . Pay special attention to this fragment:

The function in the option rendertakes precedence over the render-function compiled from the option templateand over the HTML template located at the mount point specified in the option el.

Answer 2

For .owl-carousel, change the width, for example, to 90%, place it in the center (margin: 0 auto) and tweak the left/right of owl-prev/owl-next.
Also, so that the design does not change (the buttons will remain in the same place, and the carousel will decrease), you can increase the size of the hfblock, wrap all its contents in an additional div, which already has a width set.

Answer 3

The buttons are not visible because they have negative values ​​left: -48px; and right: -48px;

Answer 4

What site are you doing?

Answer 5

Like media queries, right?