@@ -1306,53 +1306,53 @@ List of 300 VueJS Interview Questions
1306
1306
Let us see the example with step by step instructions.
1307
1307
1308
1308
**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>
1312
1312
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>
1323
1323
```
1324
1324
1325
1325
**Step 2:** Import Vue and VueRouter packages and then apply router
1326
1326
1327
1327
```javascript
1328
- import Vue from ' vue' ;
1329
- import VueRouter from ' vue- router' ;
1328
+ import Vue from ' vue' ;
1329
+ import VueRouter from ' vue- router' ;
1330
1330
1331
- Vue.use(VueRouter)
1331
+ Vue.use(VueRouter)
1332
1332
```
1333
1333
**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> ' }
1337
1337
```
1338
1338
**Step 4:** Define your route where each one maps to a component
1339
1339
```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
+ ]
1344
1344
```
1345
1345
**Step 5:** Create the router instance and pass the `routes` option
1346
1346
```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
+ })
1350
1350
```
1351
1351
**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' )
1356
1356
```
1357
1357
1358
1358
Now you are able to navigate different pages(Home, Services) with in Vue application.
0 commit comments