Browse Source

router v2

master
Jakub Škrabánek 1 year ago
parent
commit
dc04c6796e
  1. 4
      vue/routerpushv2/.browserslistrc
  2. 17
      vue/routerpushv2/.eslintrc.js
  3. 23
      vue/routerpushv2/.gitignore
  4. 24
      vue/routerpushv2/README.md
  5. 5
      vue/routerpushv2/babel.config.js
  6. 19
      vue/routerpushv2/jsconfig.json
  7. 11801
      vue/routerpushv2/package-lock.json
  8. 25
      vue/routerpushv2/package.json
  9. BIN
      vue/routerpushv2/public/favicon.ico
  10. 17
      vue/routerpushv2/public/index.html
  11. 30
      vue/routerpushv2/src/App.vue
  12. BIN
      vue/routerpushv2/src/assets/logo.png
  13. 59
      vue/routerpushv2/src/components/HelloWorld.vue
  14. 111
      vue/routerpushv2/src/indata.js
  15. 5
      vue/routerpushv2/src/main.js
  16. 38
      vue/routerpushv2/src/router/index.js
  17. 29
      vue/routerpushv2/src/views/AboutView.vue
  18. 37
      vue/routerpushv2/src/views/DetailView.vue
  19. 18
      vue/routerpushv2/src/views/HomeView.vue
  20. 13
      vue/routerpushv2/src/views/NotFound.vue
  21. 4
      vue/routerpushv2/vue.config.js

4
vue/routerpushv2/.browserslistrc

@ -0,0 +1,4 @@
> 1%
last 2 versions
not dead
not ie 11

17
vue/routerpushv2/.eslintrc.js

@ -0,0 +1,17 @@
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}

23
vue/routerpushv2/.gitignore

@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

24
vue/routerpushv2/README.md

@ -0,0 +1,24 @@
# pushv2
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
vue/routerpushv2/babel.config.js

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

19
vue/routerpushv2/jsconfig.json

@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

11801
vue/routerpushv2/package-lock.json

File diff suppressed because it is too large

25
vue/routerpushv2/package.json

@ -0,0 +1,25 @@
{
"name": "pushv2",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
}
}

BIN
vue/routerpushv2/public/favicon.ico

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

17
vue/routerpushv2/public/index.html

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

30
vue/routerpushv2/src/App.vue

@ -0,0 +1,30 @@
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>

BIN
vue/routerpushv2/src/assets/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

59
vue/routerpushv2/src/components/HelloWorld.vue

@ -0,0 +1,59 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

111
vue/routerpushv2/src/indata.js

@ -0,0 +1,111 @@
/*
id - ID (int)
first_name - Jmeno (string)
last_name - Prijmeni (string)
email - e-mail (string)
gender - pohlavi (string -> Male/Female)
ip_address - IPv4 (string)
job_title - prace (string)
*/
const personal = [{"id":1,"first_name":"Berk","last_name":"Evitts","email":"bevitts0@dedecms.com","gender":"Male","ip_address":"182.24.221.103","job_title":"Database Administrator I"},
{"id":2,"first_name":"Gwenneth","last_name":"Fiddyment","email":"gfiddyment1@dedecms.com","gender":"Female","ip_address":"158.214.51.250","job_title":"Geologist III"},
{"id":3,"first_name":"Conny","last_name":"Giovani","email":"cgiovani2@reuters.com","gender":"Male","ip_address":"93.154.144.103","job_title":"Senior Developer"},
{"id":4,"first_name":"Antons","last_name":"Rainford","email":"arainford3@example.com","gender":"Male","ip_address":"182.242.184.238","job_title":"Help Desk Technician"},
{"id":5,"first_name":"Kelbee","last_name":"Matthensen","email":"kmatthensen4@archive.org","gender":"Male","ip_address":"94.13.95.29","job_title":"Paralegal"},
{"id":6,"first_name":"Elise","last_name":"Fawdry","email":"efawdry5@independent.co.uk","gender":"Female","ip_address":"221.148.60.128","job_title":"Statistician III"},
{"id":7,"first_name":"Aubrey","last_name":"Hegg","email":"ahegg6@nps.gov","gender":"Male","ip_address":"21.248.253.159","job_title":"Staff Scientist"},
{"id":8,"first_name":"Jsandye","last_name":"Sherbrook","email":"jsherbrook7@sciencedaily.com","gender":"Female","ip_address":"63.40.231.40","job_title":"VP Sales"},
{"id":9,"first_name":"Letty","last_name":"Portch","email":"lportch8@kickstarter.com","gender":"Female","ip_address":"0.127.132.189","job_title":"Director of Sales"},
{"id":10,"first_name":"Cindy","last_name":"Brookshaw","email":"cbrookshaw9@arizona.edu","gender":"Female","ip_address":"252.72.85.160","job_title":"GIS Technical Architect"},
{"id":11,"first_name":"Joice","last_name":"Wrack","email":"jwracka@independent.co.uk","gender":"Female","ip_address":"187.48.125.189","job_title":"Chemical Engineer"},
{"id":12,"first_name":"Eva","last_name":"Connerly","email":"econnerlyb@hostgator.com","gender":"Female","ip_address":"48.223.80.74","job_title":"Recruiting Manager"},
{"id":13,"first_name":"Dag","last_name":"Janaszkiewicz","email":"djanaszkiewiczc@list-manage.com","gender":"Male","ip_address":"19.221.181.42","job_title":"Accounting Assistant II"},
{"id":14,"first_name":"Normie","last_name":"Garham","email":"ngarhamd@posterous.com","gender":"Male","ip_address":"168.83.121.7","job_title":"Mechanical Systems Engineer"},
{"id":15,"first_name":"Rob","last_name":"Fettis","email":"rfettise@networksolutions.com","gender":"Male","ip_address":"112.14.243.0","job_title":"Recruiter"},
{"id":16,"first_name":"Meggy","last_name":"McGilvray","email":"mmcgilvrayf@craigslist.org","gender":"Female","ip_address":"248.154.38.232","job_title":"Structural Engineer"},
{"id":17,"first_name":"Holly","last_name":"Bussen","email":"hbusseng@mlb.com","gender":"Male","ip_address":"73.29.214.223","job_title":"Account Executive"},
{"id":18,"first_name":"Therese","last_name":"Gubbin","email":"tgubbinh@bing.com","gender":"Agender","ip_address":"159.247.172.91","job_title":"Sales Associate"},
{"id":19,"first_name":"Stearn","last_name":"Wagstaffe","email":"swagstaffei@hao123.com","gender":"Male","ip_address":"14.26.159.69","job_title":"Accountant III"},
{"id":20,"first_name":"Alyssa","last_name":"Patron","email":"apatronj@naver.com","gender":"Non-binary","ip_address":"212.240.67.211","job_title":"Pharmacist"},
{"id":21,"first_name":"Alix","last_name":"Leathley","email":"aleathleyk@intel.com","gender":"Female","ip_address":"242.155.138.177","job_title":"Human Resources Manager"},
{"id":22,"first_name":"Rosalind","last_name":"Benasik","email":"rbenasikl@npr.org","gender":"Female","ip_address":"119.58.84.184","job_title":"Assistant Manager"},
{"id":23,"first_name":"Kathryn","last_name":"Gasson","email":"kgassonm@marketwatch.com","gender":"Female","ip_address":"167.244.215.185","job_title":"Senior Developer"},
{"id":24,"first_name":"Keelia","last_name":"MacHoste","email":"kmachosten@redcross.org","gender":"Female","ip_address":"80.161.112.167","job_title":"Systems Administrator II"},
{"id":25,"first_name":"Natalya","last_name":"Jakubowski","email":"njakubowskio@behance.net","gender":"Female","ip_address":"70.190.92.34","job_title":"Web Designer IV"},
{"id":26,"first_name":"Sybyl","last_name":"Craig","email":"scraigp@examiner.com","gender":"Female","ip_address":"116.181.4.125","job_title":"Technical Writer"},
{"id":27,"first_name":"Gallard","last_name":"Jeanet","email":"gjeanetq@about.com","gender":"Male","ip_address":"28.87.255.110","job_title":"Internal Auditor"},
{"id":28,"first_name":"Norah","last_name":"Decort","email":"ndecortr@stanford.edu","gender":"Female","ip_address":"180.214.73.58","job_title":"Chief Design Engineer"},
{"id":29,"first_name":"Daile","last_name":"Debrett","email":"ddebretts@google.com.hk","gender":"Female","ip_address":"162.163.112.247","job_title":"Clinical Specialist"},
{"id":30,"first_name":"Lyman","last_name":"Lovemore","email":"llovemoret@answers.com","gender":"Male","ip_address":"8.231.111.59","job_title":"Senior Developer"},
{"id":31,"first_name":"Graham","last_name":"Ledur","email":"gleduru@imageshack.us","gender":"Male","ip_address":"255.125.217.180","job_title":"Community Outreach Specialist"},
{"id":32,"first_name":"Trudy","last_name":"Kingaby","email":"tkingabyv@time.com","gender":"Female","ip_address":"46.164.239.205","job_title":"Computer Systems Analyst I"},
{"id":33,"first_name":"Haroun","last_name":"Lamers","email":"hlamersw@scribd.com","gender":"Male","ip_address":"73.22.163.125","job_title":"Recruiting Manager"},
{"id":34,"first_name":"Mariya","last_name":"Thorald","email":"mthoraldx@soundcloud.com","gender":"Female","ip_address":"176.97.110.249","job_title":"Internal Auditor"},
{"id":35,"first_name":"Claudianus","last_name":"Knapper","email":"cknappery@over-blog.com","gender":"Male","ip_address":"107.69.154.82","job_title":"Statistician III"},
{"id":36,"first_name":"Wallie","last_name":"Benfell","email":"wbenfellz@fc2.com","gender":"Female","ip_address":"60.211.158.160","job_title":"Systems Administrator IV"},
{"id":37,"first_name":"Alan","last_name":"Fain","email":"afain10@accuweather.com","gender":"Male","ip_address":"50.254.95.166","job_title":"Geological Engineer"},
{"id":38,"first_name":"Bryon","last_name":"McCamish","email":"bmccamish11@wp.com","gender":"Male","ip_address":"233.26.183.189","job_title":"Web Developer IV"},
{"id":39,"first_name":"Derron","last_name":"Everington","email":"deverington12@desdev.cn","gender":"Male","ip_address":"126.155.156.111","job_title":"GIS Technical Architect"},
{"id":40,"first_name":"Dell","last_name":"Bloore","email":"dbloore13@yellowpages.com","gender":"Female","ip_address":"97.148.166.189","job_title":"Chemical Engineer"},
{"id":41,"first_name":"Dagny","last_name":"Candelin","email":"dcandelin14@discuz.net","gender":"Male","ip_address":"187.96.224.129","job_title":"Operator"},
{"id":42,"first_name":"Bram","last_name":"Broughton","email":"bbroughton15@nps.gov","gender":"Male","ip_address":"30.30.241.152","job_title":"Clinical Specialist"},
{"id":43,"first_name":"Culley","last_name":"Mallya","email":"cmallya16@simplemachines.org","gender":"Male","ip_address":"128.6.102.97","job_title":"General Manager"},
{"id":44,"first_name":"Velma","last_name":"Breukelman","email":"vbreukelman17@t-online.de","gender":"Female","ip_address":"182.123.228.171","job_title":"Clinical Specialist"},
{"id":45,"first_name":"Roderigo","last_name":"Le Lievre","email":"rlelievre18@china.com.cn","gender":"Male","ip_address":"4.160.62.31","job_title":"Payment Adjustment Coordinator"},
{"id":46,"first_name":"Rozanna","last_name":"McGuffog","email":"rmcguffog19@senate.gov","gender":"Female","ip_address":"217.49.155.210","job_title":"Statistician IV"},
{"id":47,"first_name":"Wiatt","last_name":"Preece","email":"wpreece1a@wp.com","gender":"Male","ip_address":"175.76.89.231","job_title":"Database Administrator I"},
{"id":48,"first_name":"Abagael","last_name":"Mesant","email":"amesant1b@howstuffworks.com","gender":"Agender","ip_address":"6.13.42.230","job_title":"Systems Administrator III"},
{"id":49,"first_name":"Bertrand","last_name":"Josham","email":"bjosham1c@omniture.com","gender":"Male","ip_address":"166.16.70.192","job_title":"Assistant Media Planner"},
{"id":50,"first_name":"Laurene","last_name":"Casin","email":"lcasin1d@blogspot.com","gender":"Female","ip_address":"212.115.16.151","job_title":"Senior Editor"},
{"id":51,"first_name":"Elli","last_name":"Ornelas","email":"eornelas1e@pbs.org","gender":"Female","ip_address":"220.83.207.207","job_title":"Geologist IV"},
{"id":52,"first_name":"Vincenz","last_name":"Alexander","email":"valexander1f@uol.com.br","gender":"Male","ip_address":"209.242.241.95","job_title":"Chemical Engineer"},
{"id":53,"first_name":"Lowrance","last_name":"Stayte","email":"lstayte1g@engadget.com","gender":"Male","ip_address":"57.154.24.135","job_title":"Editor"},
{"id":54,"first_name":"Wendy","last_name":"Ibbison","email":"wibbison1h@tripadvisor.com","gender":"Female","ip_address":"223.216.254.36","job_title":"Junior Executive"},
{"id":55,"first_name":"Ricca","last_name":"Filippone","email":"rfilippone1i@twitter.com","gender":"Female","ip_address":"231.96.18.243","job_title":"Programmer III"},
{"id":56,"first_name":"Reinold","last_name":"Penk","email":"rpenk1j@dagondesign.com","gender":"Male","ip_address":"238.182.107.236","job_title":"Physical Therapy Assistant"},
{"id":57,"first_name":"Cthrine","last_name":"Tripett","email":"ctripett1k@mlb.com","gender":"Female","ip_address":"61.33.48.102","job_title":"Accountant I"},
{"id":58,"first_name":"Rowe","last_name":"Pocklington","email":"rpocklington1l@wordpress.org","gender":"Female","ip_address":"231.243.163.208","job_title":"VP Accounting"},
{"id":59,"first_name":"Lance","last_name":"Billie","email":"lbillie1m@java.com","gender":"Male","ip_address":"91.154.197.4","job_title":"Civil Engineer"},
{"id":60,"first_name":"Doria","last_name":"Ledgerton","email":"dledgerton1n@indiatimes.com","gender":"Female","ip_address":"173.39.191.3","job_title":"Legal Assistant"},
{"id":61,"first_name":"Nealy","last_name":"McInility","email":"nmcinility1o@mapy.cz","gender":"Male","ip_address":"113.111.5.177","job_title":"Payment Adjustment Coordinator"},
{"id":62,"first_name":"Brockie","last_name":"Etteridge","email":"betteridge1p@europa.eu","gender":"Male","ip_address":"225.253.205.31","job_title":"Research Assistant I"},
{"id":63,"first_name":"Tracey","last_name":"Po","email":"tpo1q@umich.edu","gender":"Male","ip_address":"223.12.105.95","job_title":"Social Worker"},
{"id":64,"first_name":"Murry","last_name":"Ramme","email":"mramme1r@yahoo.com","gender":"Male","ip_address":"166.243.81.209","job_title":"Staff Scientist"},
{"id":65,"first_name":"Almeria","last_name":"Filippello","email":"afilippello1s@wikimedia.org","gender":"Female","ip_address":"122.13.188.11","job_title":"Marketing Manager"},
{"id":66,"first_name":"Ainslee","last_name":"Tock","email":"atock1t@google.com.au","gender":"Female","ip_address":"187.135.17.226","job_title":"Structural Analysis Engineer"},
{"id":67,"first_name":"Gaven","last_name":"Jurca","email":"gjurca1u@i2i.jp","gender":"Male","ip_address":"75.232.4.30","job_title":"Statistician II"},
{"id":68,"first_name":"Vivianna","last_name":"Newe","email":"vnewe1v@jugem.jp","gender":"Female","ip_address":"225.95.75.56","job_title":"Registered Nurse"},
{"id":69,"first_name":"Elianore","last_name":"Marshfield","email":"emarshfield1w@xrea.com","gender":"Female","ip_address":"7.20.17.247","job_title":"Structural Engineer"},
{"id":70,"first_name":"Seymour","last_name":"Doree","email":"sdoree1x@oracle.com","gender":"Male","ip_address":"216.135.153.31","job_title":"Administrative Officer"},
{"id":71,"first_name":"Veronica","last_name":"Dimock","email":"vdimock1y@noaa.gov","gender":"Female","ip_address":"83.195.50.152","job_title":"Nurse Practicioner"},
{"id":72,"first_name":"Lesya","last_name":"Lashley","email":"llashley1z@businessweek.com","gender":"Female","ip_address":"81.82.114.67","job_title":"Human Resources Manager"},
{"id":73,"first_name":"Reena","last_name":"Ziemecki","email":"rziemecki20@nih.gov","gender":"Polygender","ip_address":"26.251.243.235","job_title":"Developer I"},
{"id":74,"first_name":"Juan","last_name":"Aspinal","email":"jaspinal21@wikimedia.org","gender":"Male","ip_address":"246.102.242.76","job_title":"Senior Sales Associate"},
{"id":75,"first_name":"Dmitri","last_name":"Andryushin","email":"dandryushin22@paginegialle.it","gender":"Male","ip_address":"63.51.95.135","job_title":"Assistant Professor"},
{"id":76,"first_name":"Jermain","last_name":"Pizey","email":"jpizey23@mail.ru","gender":"Male","ip_address":"243.173.193.15","job_title":"Marketing Manager"},
{"id":77,"first_name":"Myrah","last_name":"Walters","email":"mwalters24@ezinearticles.com","gender":"Female","ip_address":"84.167.61.230","job_title":"Tax Accountant"},
{"id":78,"first_name":"Edvard","last_name":"Hacun","email":"ehacun25@spiegel.de","gender":"Male","ip_address":"47.19.84.168","job_title":"Actuary"},
{"id":79,"first_name":"Free","last_name":"Behnecke","email":"fbehnecke26@ebay.co.uk","gender":"Male","ip_address":"240.65.77.84","job_title":"Food Chemist"},
{"id":80,"first_name":"Viv","last_name":"Cossell","email":"vcossell27@wunderground.com","gender":"Female","ip_address":"177.226.75.66","job_title":"Chemical Engineer"},
{"id":81,"first_name":"Carolyn","last_name":"Mead","email":"cmead28@comsenz.com","gender":"Female","ip_address":"247.198.28.180","job_title":"Engineer II"},
{"id":82,"first_name":"Elyn","last_name":"de Tocqueville","email":"edetocqueville29@engadget.com","gender":"Female","ip_address":"126.144.159.207","job_title":"Geological Engineer"},
{"id":83,"first_name":"Lana","last_name":"Esley","email":"lesley2a@arstechnica.com","gender":"Female","ip_address":"88.122.157.17","job_title":"Environmental Tech"},
{"id":84,"first_name":"Hal","last_name":"Belderson","email":"hbelderson2b@bloomberg.com","gender":"Male","ip_address":"214.243.42.59","job_title":"Help Desk Operator"},
{"id":85,"first_name":"Nance","last_name":"Noteyoung","email":"nnoteyoung2c@typepad.com","gender":"Female","ip_address":"253.42.241.252","job_title":"Systems Administrator II"},
{"id":86,"first_name":"Hannie","last_name":"Gaule","email":"hgaule2d@slashdot.org","gender":"Female","ip_address":"97.0.240.64","job_title":"Statistician I"},
{"id":87,"first_name":"Dall","last_name":"Ketts","email":"dketts2e@sbwire.com","gender":"Male","ip_address":"249.198.214.208","job_title":"Human Resources Manager"},
{"id":88,"first_name":"Reinold","last_name":"Luard","email":"rluard2f@theatlantic.com","gender":"Male","ip_address":"59.145.42.20","job_title":"Administrative Assistant II"},
{"id":89,"first_name":"Debi","last_name":"Croux","email":"dcroux2g@cisco.com","gender":"Polygender","ip_address":"187.1.165.62","job_title":"Environmental Specialist"},
{"id":90,"first_name":"Dedie","last_name":"Dowry","email":"ddowry2h@quantcast.com","gender":"Female","ip_address":"42.44.69.136","job_title":"VP Product Management"},
{"id":91,"first_name":"Guillermo","last_name":"Danieli","email":"gdanieli2i@gravatar.com","gender":"Male","ip_address":"117.40.186.42","job_title":"Marketing Assistant"},
{"id":92,"first_name":"Perl","last_name":"Jirieck","email":"pjirieck2j@geocities.jp","gender":"Female","ip_address":"86.69.235.176","job_title":"Staff Scientist"},
{"id":93,"first_name":"Aland","last_name":"Battabee","email":"abattabee2k@wsj.com","gender":"Male","ip_address":"62.117.167.220","job_title":"Editor"},
{"id":94,"first_name":"Winnie","last_name":"Markushkin","email":"wmarkushkin2l@bbc.co.uk","gender":"Genderfluid","ip_address":"59.126.100.128","job_title":"Director of Sales"},
{"id":95,"first_name":"Drusie","last_name":"Inman","email":"dinman2m@msu.edu","gender":"Female","ip_address":"234.33.165.42","job_title":"Statistician II"},
{"id":96,"first_name":"Theodora","last_name":"Walpole","email":"twalpole2n@hhs.gov","gender":"Female","ip_address":"189.114.160.183","job_title":"Senior Financial Analyst"},
{"id":97,"first_name":"Durand","last_name":"Mellor","email":"dmellor2o@go.com","gender":"Male","ip_address":"142.59.183.91","job_title":"Automation Specialist IV"},
{"id":98,"first_name":"Gaby","last_name":"Ismay","email":"gismay2p@msn.com","gender":"Male","ip_address":"108.112.212.166","job_title":"Compensation Analyst"},
{"id":99,"first_name":"Avrom","last_name":"Parry","email":"aparry2q@hubpages.com","gender":"Male","ip_address":"229.61.249.145","job_title":"Actuary"},
{"id":100,"first_name":"Matthaeus","last_name":"Vasse","email":"mvasse2r@tiny.cc","gender":"Male","ip_address":"97.227.152.28","job_title":"Database Administrator IV"}]
export default personal;

5
vue/routerpushv2/src/main.js

@ -0,0 +1,5 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

38
vue/routerpushv2/src/router/index.js

@ -0,0 +1,38 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import DetailView from '../views/DetailView.vue'
import NotFound from "../views/NotFound.vue"
const routes = [
{
path: '/:catchAll(.*)',
name: 'notfound',
component: NotFound
},
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about/:Pid',
name: 'details',
component: DetailView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router

29
vue/routerpushv2/src/views/AboutView.vue

@ -0,0 +1,29 @@
<template>
<div class="about">
<h1>EXAMPLE TITLE</h1>
<div v-for="(data,index) in personal" :key="index"
style="border: 1px solid blue;" @click="goDetails(data.id)">
<h2> {{data.first_name}} {{data.last_name}}</h2>
</div>
</div>
</template>
<script>
import personal from "@/indata"
export default {
name: "AboutView",
data(){
return{
personal
}
},
methods: {
goDetails(idd) {
let id = idd
this.$router.push({name:"details", params:{Pid:id}})
}
}
}
</script>

37
vue/routerpushv2/src/views/DetailView.vue

@ -0,0 +1,37 @@
<template>
<div>
<h1>EXAMPLE DETAILS</h1>
<div v-for="(data,index) in personal" :key="index">
<div v-if="perId == data.id">
{{ data.ip_address }}
</div>
</div>
<br>
<router-link to="/about">LIST PAGE</router-link>
</div>
</template>
<script>
import personal from "@/indata"
export default {
name: "DetailView",
data(){
return{
personal,
perId: this.$route.params.Pid
}
},
mounted() {
this.checkValidity();
},
methods: {
checkValidity() {
const isValid = this.personal.some(data => data.id == this.perId)
if(!isValid){
this.$router.replace({path:"/error"})
}
}
}
}
</script>

18
vue/routerpushv2/src/views/HomeView.vue

@ -0,0 +1,18 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>

13
vue/routerpushv2/src/views/NotFound.vue

@ -0,0 +1,13 @@
<template>
<div class="notfound">
<h1>ERROR 404</h1>
<h2>Page Not Found</h2>
<router-link to="/">HOME PAGE</router-link>
</div>
</template>
<script>
export default {
name: "NotFound"
}
</script>

4
vue/routerpushv2/vue.config.js

@ -0,0 +1,4 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
Loading…
Cancel
Save