Vue-router, как сделать ссылку на новую страницу?

Question

[vitaliy_novenkiy]

Добрый день. Роутер переводит на другую страницу-компонент(меняется URl), но новая страница не отображается.

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

[0xD34F]

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

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

Вы вообще как - понимаете, что тут понаписали? Вопрос риторический - конечно нет, не понимаете. Открываете документацию и читаете - что такое render, el и $mount. Особое внимание обращаете вот на этот фрагмент:

The render function has priority over the render function compiled from template option or in-DOM HTML template of the mounting element which is specified by the el option.

Comments

[vitaliy_novenkiy]

спасибо.