Для запуска приложения с разделенными роутами во Vue Router, вам нужно выполнить следующие шаги:
1. Установите Vue Router с помощью npm или yarn команды:
```shell
npm install vue-router
```
или
```shell
yarn add vue-router
```
2. Создайте файл `router.js` и добавьте в него следующий код:
```javascript
import VueRouter from 'vue-router'
// Импортируйте компоненты, которые вы планируете использовать в качестве страниц или блоков приложения
import SomeBlock from './components/SomeBlock.vue'
// Определите ваши маршруты с помощью пути и соответствующего компонента
const routes = [
{
path: '/somepath/app/someblock/:id',
name: 'someblock',
component: SomeBlock
}
]
// Создайте экземпляр VueRouter и передайте ему определенные маршруты
const router = new VueRouter({
mode: 'history', // Для удаления символа # из URL
routes // Обратите внимание, что это сокращение синтаксиса ES6
})
export default router
```
3. В вашем основном файле приложения (`main.js`) добавьте следующий код, чтобы подключить и использовать Vue Router:
```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router, // Передайте экземпляр VueRouter в качестве параметра
render: h => h(App)
}).$mount('#app')
```
4. В файле `App.vue` добавьте следующий код для отображения маршрутов:
```html
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
```
5. Создайте компоненты, которые используются в маршрутах (например, `SomeBlock.vue`), и настройте их в соответствии с вашими потребностями.
Теперь ваше приложение с разделенными роутами должно быть настроено и готово к запуску. После запуска вы сможете открыть его в браузере по прямому адресу, такому как http://site.com/somepath/app/someblock/55, и приложение будет работать и отображать нужные компоненты. Кроме того, если перезагрузить страницу, оно будет продолжать работать и отображать нужные компоненты благодаря использованию режима "history" в Vue Router.