Задать вопрос

danilo9

Комментарии

  • Vue3: Как сделать сайт без перезагрузки (загружать из API)?

    @danilo9 Автор вопроса
    pLavrenov, вы немного не так поняли.
    Как отобразить полученный component или html из json в компоненте?
    Я пробовал createElement и
    Написано

  • Vue3: Как сделать сайт без перезагрузки (загружать из API)?

    @danilo9 Автор вопроса
    Разве роутер является выходом? Я его уже использовал, но ничего не видел про работу с APi сайта.
    Да router меняет url, но он ничего не сможет загрузить

    Пример:
    <!DOCTYPE html>
<html>
<head>
<title>Маршрутизация во Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@next"></script>
<script>
const NotFound = { template: '<h2>Страница не найдена</h2>' }
const Home = { template: 
    `<h2>Home Page</h2>
    <div><button @click="navigate">Best Phone</button></div>` ,
    methods: {
        navigate(){
            router.push({ name: 'product', params: { cat: 'phone' }, query:{id: '1'} });
        }
    }
}
const Product = { 
    template: `<h2>Product</h2>
    <h3>Category: {{$route.params.cat}}</h3>
    <h3>Id: {{$route.query.id}}</h3>` 
}
  
const routes = [
    { path: '/', component: Home },
    { path: '/products/:cat', component: Product, name:'product'},
    { path: '/:pathMatch(.*)*', component: NotFound  }
];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});
 
const app = Vue.createApp({});
app.use(router);    
app.mount('#app');
</script>
</body>
</html>
    Написано