As a developer, you notice that developing a Single Page Application (SPA) requires routing. How would you achieve/use routing?

As a developer, you notice that developing a Single Page Application (

1.	As a developer, you notice that developing a Single Page Application (SPA) requires routing. How would you achieve/use routing?
Answer» One of the unique features of vue.js is routing in Single Page Applications. The vue router allows the transition from one page to another page on the user interface without NECESSARILY the need for request from the server. Routing in Single Page Applications is achieved through the use of vue-router library. The collection offers a variety of feature sets such as the personalized/customized scroll behavior, transitions, nested routes, HTML5 history MODE and route structures and wildcards. Vue router also allows integration of some third party routers. In vue applications, vue router is the library that allows navigation on the APP. An example of achieved routing is in vue app. In the application, it is easier to move from one page to another thanks to the vue router. Most of the modern single page applications use the vue router. To build a simple page component without using the full features of router library, simple routing is required as in the example below: const NotFound = { template: '<p>Page not found</p>' } const Home = { template: '<p>home page</p>' } const About = { template: '<p>about page</p>' } const routes = { '/': Home, '/about': About } new Vue({ el: '#app', data: { currentRoute: window.location.pathname }, COMPUTED: { ViewComponent () { return routes[this.currentRoute] \|\| NotFound } }, render (h) { return h(this.ViewComponent) } })

Discussion

No Comment Found

Related InterviewSolutions

<script> export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }, computed: { publishedBooksMessage() { return this.author.books.length > 0 ? 'Yes' : 'No' } } } </script> <template> <p>Has published books:</p> <span>{{ publishedBooksMessage }}</span> </template>
Second:
<script> export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }, methods: { publishedBooksMessage() { return this.author.books.length > 0 ? 'Yes' : 'No' } } } </script> <template> <p>Has published books:</p> <span>{{ publishedBooksMessage() }}</span> </template>
First:
The following two codes have the same output which is ‘yes’. Which one is more preferable performance-wise and why?
Explain the dissimilarity between one-way data flow and two-way data binding? Which vue.js directive is used for each?
Why should arrow functions not be used in writing lifecycle hooks in Vue instances?
Explain Vue.js common issues when tracking changes?
const router = new VueRouter({ routes: [ { path: '/user/:name', component: User } { path: '/user/:name', component: Admin } { path: '/user/:name', component: Customer } ] })
Does the following code have any errors? If yes, what is the error and how are you supposed to correct it? If not, which component (User,Admin,Customer) is going to be invoked when ‘/user/:name’ is navigated to.

As a developer, you notice that developing a Single Page Application (SPA) requires routing. How would you achieve/use routing?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment