Skip to content

Commit 5aa6b9a

Browse files
committed
sudheerj#42 syntax-highlighting + indentation
1 parent f214c60 commit 5aa6b9a

File tree

1 file changed

+30
-30
lines changed

1 file changed

+30
-30
lines changed

README.md

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)