Products
Products
Video Hosting
Upload and manage your videos in a centralized video library.
Image Hosting
Upload and manage all your images in a centralized library.
Galleries
Choose from 100+templates to showcase your media in style.
Video Messaging
Record, and send personalized video messages.
CincoTube
Create your own community video hub your team, students or fans.
Pages
Create dedicated webpages to share your videos and images.
Live
Create dedicated webpages to share your videos and images.
For Developers
Video API
Build a unique video experience.
DeepUploader
Collect and store user content from anywhere with our file uploader.
Solutions
Solutions
Enterprise
Supercharge your business with secure, internal communication.
Townhall
Webinars
Team Collaboration
Learning & Development
Creative Professionals
Get creative with a built in-suite of editing and marketing tools.
eCommerce
Boost sales with interactive video and easy-embedding.
Townhall
Webinars
Team Collaboration
Learning & Development
eLearning & Training
Host and share course materials in a centralized portal.
Sales & Marketing
Attract, engage and convert with interactive tools and analytics.
"Cincopa helped my Enterprise organization collaborate better through video."
Book a Demo
Resources
Resources
Blog
Learn about the latest industry trends, tips & tricks.
Help Centre
Get access to help articles FAQs, and all things Cincopa.
Partners
Check out our valued list of partners.
Product Updates
Stay up-to-date with our latest greatest features.
Ebooks, Guides & More
Customer Stories
Hear how we've helped businesses succeed.
Boost Campaign Performance Through Video
Discover how to boost your next campaign by using video.
Download Now
Pricing
Watch a Demo
Demo
Login
Start Free Trial
Vue Router is the routing library for Vue.js, designed to enable navigation in Single Page Applications (SPAs) without triggering full page reloads. Instead of reloading HTML files, Vue dynamically renders components based on the current URL, creating a fast, seamless, app-like experience. As your Vue application grows, a routing system becomes essential for managing multiple views, dynamic content, and URL-based state. Installing Vue Router Vue Router is not bundled with Vue by default and must be installed manually. Choose the version that matches your Vue setup: For Vue 3 & 4 : npm install vue-router@4 For Vue 2 : npm install vue-router@3 Creating the Router Instance Define a list of route records that map URL paths to Vue components. Then, create the router instance: Example : Define Your Route-to-Component Mapping and Create a Router Instance // router/index.js import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = createRouter({ history: createWebHistory(), routes }) export default router Explanation : createRouter() initializes the router. createWebHistory() uses the browser’s History API for clean URLs. The routes array defines path-to-component mappings. Integrating Vue Router into the App To enable routing in a Vue application, the router instance must be registered with the app during initialization. This connects the defined routes to the root component and activates Vue Router's internal navigation system. Example : Activate Routing, Register the Router in Your main.js File // main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') Explanation : app.use(router) enables routing across the app. app.mount('#app') connects Vue to the root DOM element. Rendering Route Components with
In Vue Router,
displays the active route’s component. It serves as an outlet that updates whenever the route changes, allowing the layout to remain static while only the routed content updates. Example : Use
in Your Layout to render the Component Associated with the Current Route
Explanation :
is a dynamic placeholder that updates as routes change. It enables layouts to stay static while routed content is swapped dynamically. Navigating with
Allow navigation between routes without reloading the page .
is a built-in Vue Router component that creates anchor elements bound to route paths. It updates the browser’s URL and triggers a route change through the Vue Router system. Example : Use
Instead of Regular Anchor Tags to Handle Client-side Navigation Without Reloading
Home
About
Explanation : Automatically intercepts clicks and updates the browser URL. Supports active styling and accessibility out of the box. Dynamic Route Parameters Allow dynamic matching in route paths by using placeholders (e.g., : id ). When a route with parameters is matched, the values are exposed in route.params for use inside the component. Example : Handle Dynamic Segments in URLs using :paramName Syntax // router/index.js { path: '/user/:id', component: UserProfile } Example : To Access the Parameter Inside the Component Explanation : /user/42 will pass 42 as the id param. useRoute() provides access to the current route and its params. Working with Video in Vue Components Vue components can handle embedded video playback using HTML5’s
tag. Video sources can be static or dynamic. Static Video Embedding Files placed in the public/ directory can be referenced in Vue templates using the
element. These files are served without being processed by the module system. Example : To Embed Static Videos from the public/ Folder
Explanation : Files in public/ are served directly without being processed by Webpack or Vite. Dynamic Video Binding with Props Video source paths can be dynamically bound to props inside a Vue component. Enables the same component to load different videos based on external inputs without changing the component structure. The component receives a videoUrl prop and binds it to the
element using Vue’s template syntax. Example : Pass a Video URL as a Prop to Make the Component Reusable
Explanation : :src='videoUrl' binds the video source dynamically. The videoUrl prop can come from a parent component or route. Loading Video Using Route Parameters When the route includes a dynamic segment (e.g., /video/:id ), the useRoute() hook allows access to the params.id value can be used to construct the video file path at runtime. For dynamic video routes like /video/:id, retrieve the ID and use it to construct the source. Example : Use Route Parameters to Build Dynamic Video Paths // router/index.js { path: '/video/:id', component: VideoPlayer }
Explanation : Visiting /video/lecture-1 loads /videos/lecture-1.mp4 . Programmatic Navigation to Video Routes The useRouter() hook provides access to Vue Router’s navigation API. Using router.push() , the app can change routes programmatically, for example, to navigate to a video player view with a specific video ID. Example : Navigate to a Specific Video Programmatically import { useRouter } from 'vue-router' const router = useRouter() router.push('/video/lecture-1') Explanation useRouter() gives access to navigation functions. router.push() changes routes programmatically. Useful for navigating based on user actions without relying on
.
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
