@@ -1306,53 +1306,53 @@ List of 300 VueJS Interview Questions
13061306 Let us see the example with step by step instructions.
13071307
13081308 **Step 1:** Configure router link and router view in the template
1309- ```javascript
1310- <script src="https://unpkg.com/vue/dist/vue.js"></script>
1311- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
1309+ ```vue
1310+ <script src="https://unpkg.com/vue/dist/vue.js"></script>
1311+ <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
13121312
1313- <div id="app">
1314- <h1>Welcome to Vue routing app!</h1>
1315- <p>
1316- <!-- use router-link component for navigation using `to` prop. It rendered as an `<a>` tag -->
1317- <router-link to="/home">Home</router-link>
1318- <router-link to="/services">Services</router-link>
1319- </p>
1320- <!-- route outlet in which component matched by the route will render here -->
1321- <router-view></router-view>
1322- </div>
1313+ <div id="app">
1314+ <h1>Welcome to Vue routing app!</h1>
1315+ <p>
1316+ <!-- use router-link component for navigation using `to` prop. It rendered as an `<a>` tag -->
1317+ <router-link to="/home">Home</router-link>
1318+ <router-link to="/services">Services</router-link>
1319+ </p>
1320+ <!-- route outlet in which component matched by the route will render here -->
1321+ <router-view></router-view>
1322+ </div>
13231323 ```
13241324
13251325 **Step 2:** Import Vue and VueRouter packages and then apply router
13261326
13271327 ```javascript
1328- import Vue from ' vue' ;
1329- import VueRouter from ' vue- router' ;
1328+ import Vue from ' vue' ;
1329+ import VueRouter from ' vue- router' ;
13301330
1331- Vue.use(VueRouter)
1331+ Vue.use(VueRouter)
13321332 ```
13331333 **Step 3:** Define or import route components.
1334- ```javacript
1335- const Home = { template: ' < div> Home< / div> ' }
1336- const Services = { template: ' < div> Services< / div> ' }
1334+ ```javascript
1335+ const Home = { template: ' < div> Home< / div> ' }
1336+ const Services = { template: ' < div> Services< / div> ' }
13371337 ```
13381338 **Step 4:** Define your route where each one maps to a component
13391339 ```javascript
1340- const routes = [
1341- { path: ' / home' , component: Home },
1342- { path: ' / services' , component: Services }
1343- ]
1340+ const routes = [
1341+ { path: ' / home' , component: Home },
1342+ { path: ' / services' , component: Services }
1343+ ]
13441344 ```
13451345 **Step 5:** Create the router instance and pass the `routes` option
13461346 ```javascript
1347- const router = new VueRouter({
1348- routes // short for `routes: routes`
1349- })
1347+ const router = new VueRouter({
1348+ routes // short for `routes: routes`
1349+ })
13501350 ```
13511351 **Step 6:** Create and mount the root instance.
1352- ```javacript
1353- const app = new Vue({
1354- router
1355- }).$mount(' #app' )
1352+ ```javascript
1353+ const app = new Vue({
1354+ router
1355+ }).$mount(' #app' )
13561356 ```
13571357
13581358 Now you are able to navigate different pages(Home, Services) with in Vue application.
0 commit comments