Skip to content

Commit 2002492

Browse files
nil1729nil1729
committed
add Router
1 parent 40c1b7c commit 2002492

File tree

12 files changed

+218
-18
lines changed

12 files changed

+218
-18
lines changed

‎vue-noob-router/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<title><%= htmlWebpackPlugin.options.title %></title>
99
<link
1010
rel="stylesheet"
11-
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
11+
href="https://bootswatch.com/4/united/bootstrap.min.css"
1212
/>
1313
</head>
1414
<body>

‎vue-noob-router/src/App.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
<template>
2-
<div id="app">
3-
<app-navbar />
2+
<div class="container">
3+
<h1 class="text-center text-primary">Routing</h1>
4+
<hr class="my-3" />
5+
<router-view name="navbar-top" />
46
<router-view />
7+
<router-view name="navbar-bottom" />
58
</div>
69
</template>
710

811
<script>
9-
import Navbar from "@/components/layouts/Navbar";
1012
export default {
1113
name: "App",
12-
components: {
13-
appNavbar: Navbar
14-
}
1514
};
1615
</script>
1716

‎vue-noob-router/src/components/User/UserDetail.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<div class="container">
3+
<h3 class="text-success">User Detail Page</h3>
4+
<p class="lead">
5+
<span class="font-weight-bold">UserID</span>
6+
{{': '}}{{$route.params.id}}
7+
</p>
8+
<p class="lead">
9+
<span class="font-weight-bold">Name</span>
10+
{{': '}}{{ details[$route.params.id] }}
11+
</p>
12+
<button @click="goToEditPage" class="btn btn-sm btn-danger">Edit User</button>
13+
</div>
14+
</template>
15+
16+
<script>
17+
export default {
18+
name: "UserDetail",
19+
data() {
20+
return {
21+
details: ["", "Nilanjan Deb", "John Doe", "Lorem Ipsum", "Brad Jones"],
22+
};
23+
},
24+
methods: {
25+
goToEditPage() {
26+
this.$router.push({
27+
name: "userEdit",
28+
params: {
29+
id: this.$route.params.id,
30+
},
31+
query: {
32+
fname: this.details[this.$route.params.id].split(" ")[0],
33+
lname: this.details[this.$route.params.id].split(" ")[1],
34+
},
35+
});
36+
},
37+
},
38+
};
39+
</script>
40+
41+
<style>
42+
</style>

‎vue-noob-router/src/components/User/UserEdit.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div class="container">
3+
<h3 class="text-success">User Edit Page</h3>
4+
<p class="lead">
5+
<span class="font-weight-bold">UserID</span>
6+
{{': '}}{{$route.params.id}}
7+
</p>
8+
<div class="form-group">
9+
<fieldset>
10+
<label class="control-label">First Name</label>
11+
<input class="form-control" readonly :value="$route.query.fname" />
12+
</fieldset>
13+
</div>
14+
<div class="form-group">
15+
<fieldset>
16+
<label class="control-label">Last Name</label>
17+
<input class="form-control" readonly :value="$route.query.lname" />
18+
</fieldset>
19+
</div>
20+
<router-link
21+
:to="{name: 'userDetail', params: {id: $route.params.id}}"
22+
class="btn btn-sm btn-secondary"
23+
>Go to Detail Page</router-link>
24+
</div>
25+
</template>
26+
27+
<script>
28+
export default {
29+
name: "UserEditPage",
30+
};
31+
</script>
32+
33+
<style>
34+
input {
35+
box-shadow: none !important;
36+
}
37+
</style>

‎vue-noob-router/src/components/User/UserStart.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div class="container">
3+
<h3 class="text-success">List of Users</h3>
4+
<ul class="list-group">
5+
<router-link
6+
v-for="i in 4"
7+
:key="i"
8+
tag="li"
9+
:to="{ name: 'userDetail', params: {id: i} }"
10+
class="list-group-item"
11+
style="cursor: pointer"
12+
>
13+
<a>User {{ i }}</a>
14+
</router-link>
15+
</ul>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
name: "UserStart",
22+
};
23+
</script>
24+
25+
<style>
26+
</style>

‎vue-noob-router/src/components/layouts/Navbar.vue‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,26 @@
11
<template>
2-
<nav>
3-
<div class="nav-wrapper blue">
4-
<router-link to="/" class="brand-logo center">Vue Router</router-link>
2+
<nav class="my-3 navbar navbar-expand-lg navbar-light bg-light">
3+
<div class="collapse navbar-collapse">
4+
<ul class="navbar-nav mr-auto">
5+
<li class="nav-item active">
6+
<router-link active-class="active" exact to="/" class="btn btn-sm btn-info mx-2">Home</router-link>
7+
</li>
8+
<li class="nav-item active">
9+
<router-link active-class="active" to="/user" class="btn btn-sm btn-info mx-2">User</router-link>
10+
</li>
11+
</ul>
512
</div>
613
</nav>
714
</template>
815

916
<script>
1017
export default {
11-
name: "AppNavbar"
18+
name: "AppNavbar",
1219
};
1320
</script>
1421

1522
<style>
23+
.btn {
24+
box-shadow: none !important;
25+
}
1626
</style>

‎vue-noob-router/src/components/pages/404.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div class="container text-center">
3+
<div class="display-4 text-info">Page Not Found</div>
4+
<p class="lead">The page you are looking for does not exist</p>
5+
<hr class="my-2" />
6+
<router-link to="/" class="btn btn-sm btn-warning">Go Back</router-link>
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {};
12+
</script>
13+
14+
<style>
15+
</style>

‎vue-noob-router/src/components/pages/About.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
<template>
22
<div class="container center">
33
<h1 class="light-green-text">About Page</h1>
4+
<button @click="goToHome" class="btn">Go to Home</button>
45
</div>
56
</template>
67

78
<script>
89
export default {
9-
name: "AppHome"
10+
name: "AppHome",
11+
methods: {
12+
goToHome() {
13+
this.$router.push("/");
14+
},
15+
},
1016
};
1117
</script>
1218

‎vue-noob-router/src/components/pages/Home.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
<template>
2-
<div class="container center">
3-
<h1 class="light-green-text">Home Page</h1>
2+
<div class="container">
3+
<hr class="mb-3" />
4+
<h1 class="text-success">Home Page</h1>
5+
<p
6+
class="lead"
7+
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae ab quidem quibusdam tempore voluptas consectetur temporibus eligendi tenetur maiores. Repellat adipisci minus sed doloribus voluptatibus nesciunt error non! Tempore delectus, assumenda quod ratione nisi suscipit eum consequuntur quisquam voluptate repellendus.</p>
48
</div>
59
</template>
610

711
<script>
812
export default {
9-
name: "AppHome"
13+
name: "AppHome",
1014
};
1115
</script>
1216

‎vue-noob-router/src/components/pages/User.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class="container">
3+
<h1 class="text-info">User Page</h1>
4+
<hr class="my-3" />
5+
<router-view />
6+
<hr class="my-3" />
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: "User",
13+
watch: {
14+
$route() {
15+
this.id = this.$route.params.id;
16+
},
17+
},
18+
computed: {
19+
user() {
20+
return this.names[this.$route.params.id];
21+
},
22+
},
23+
};
24+
</script>
25+
26+
<style>
27+
</style>

0 commit comments

Comments
 (0)