[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:en:frontend\u002Fvue-router-state-management":4,"config":235},null,{"field_key":5,"field_name":6,"seniority":7,"topic_key":8,"topic_name":9,"spec_key":7,"spec_name":7,"locale":10,"cell_total":11,"field_total":12,"seniorities":13,"topics":17,"specs":133,"samples":150},"frontend","Frontend","","vue-router-state-management","Vue Router State Management","en",75,2925,[14,15,16],"junior","mid","senior",[18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,120,123,126,129,130],{"key":19,"name":20,"count":11},"accessibility","Accessibility",{"key":22,"name":23,"count":11},"angular-change-detection","Angular Change Detection",{"key":25,"name":26,"count":11},"angular-components-lifecycle","Angular Components Lifecycle",{"key":28,"name":29,"count":11},"angular-dependency-injection","Angular Dependency Injection",{"key":31,"name":32,"count":11},"angular-directives-pipes","Angular Directives Pipes",{"key":34,"name":35,"count":11},"angular-router-forms","Angular Router Forms",{"key":37,"name":38,"count":11},"angular-testing-performance","Angular Testing Performance",{"key":40,"name":41,"count":11},"css-layout","Css Layout",{"key":43,"name":44,"count":11},"dom-browser-apis","Dom Browser Apis",{"key":46,"name":47,"count":11},"javascript-async-concurrency","Javascript Async Concurrency",{"key":49,"name":50,"count":11},"javascript-language","Javascript Language",{"key":52,"name":53,"count":11},"javascript-memory-performance","Javascript Memory Performance",{"key":55,"name":56,"count":11},"javascript-modules-bundling","Javascript Modules Bundling",{"key":58,"name":59,"count":11},"javascript-prototypes-oop","Javascript Prototypes Oop",{"key":61,"name":62,"count":11},"javascript-runtime-apis","Javascript Runtime Apis",{"key":64,"name":65,"count":11},"javascript-testing-tooling","Javascript Testing Tooling",{"key":67,"name":68,"count":11},"performance","Performance",{"key":70,"name":71,"count":11},"react-components-jsx","React Components Jsx",{"key":73,"name":74,"count":11},"react-context-state","React Context State",{"key":76,"name":77,"count":11},"react-effects-lifecycle","React Effects Lifecycle",{"key":79,"name":80,"count":11},"react-forms-suspense","React Forms Suspense",{"key":82,"name":83,"count":11},"react-hooks-state","React Hooks State",{"key":85,"name":86,"count":11},"react-rendering-performance","React Rendering Performance",{"key":88,"name":89,"count":11},"rendering-reactivity","Rendering Reactivity",{"key":91,"name":92,"count":11},"state-management","State Management",{"key":94,"name":95,"count":11},"testing","Testing",{"key":97,"name":98,"count":11},"typescript-advanced-types","Typescript Advanced Types",{"key":100,"name":101,"count":11},"typescript-generics","Typescript Generics",{"key":103,"name":104,"count":11},"typescript-modules-declarations","Typescript Modules Declarations",{"key":106,"name":107,"count":11},"typescript-narrowing-control-flow","Typescript Narrowing Control Flow",{"key":109,"name":110,"count":11},"typescript-tooling-config","Typescript Tooling Config",{"key":112,"name":113,"count":11},"typescript-type-fundamentals","Typescript Type Fundamentals",{"key":115,"name":116,"count":11},"vue-components-props","Vue Components Props",{"key":118,"name":119,"count":11},"vue-composition-api","Vue Composition Api",{"key":121,"name":122,"count":11},"vue-directives-templates","Vue Directives Templates",{"key":124,"name":125,"count":11},"vue-performance-testing","Vue Performance Testing",{"key":127,"name":128,"count":11},"vue-reactivity-system","Vue Reactivity System",{"key":8,"name":9,"count":11},{"key":131,"name":132,"count":11},"web-security","Web Security",[134,138,141,144,147],{"key":135,"name":136,"count":137},"angular","Angular",450,{"key":139,"name":140,"count":137},"javascript","JavaScript",{"key":142,"name":143,"count":137},"react","React",{"key":145,"name":146,"count":137},"typescript","TypeScript",{"key":148,"name":149,"count":137},"vue","Vue",[151,169,182,195,209,222],{"id":152,"topic":9,"difficulty":153,"body":154,"options":155,"correct_key":160,"explanation":168},"019f7766-3002-7705-adcc-e5a44046846c",1,"In a Vue Router setup, what does `\u003Crouter-view \u002F>` do?",[156,159,162,165],{"key":157,"text":158},"a","It renders a navigation menu built from the route config",{"key":160,"text":161},"b","It renders the component matched by the current route",{"key":163,"text":164},"c","It renders every registered route's component at once",{"key":166,"text":167},"d","It only renders on the root `App.vue`, nowhere else","`\u003Crouter-view \u002F>` is a placeholder that renders whichever component the current URL matches according to the router config. It can be nested for nested routes and can appear more than once (named views), but its core job is always 'show the component for the active route'.",{"id":170,"topic":9,"difficulty":153,"body":171,"options":172,"correct_key":163,"explanation":181},"019f7766-3002-7ea4-96c3-01ed9c46b1c7","```javascript\n\u002F\u002F router config\n{ path: '\u002Fuser\u002F:id', component: UserView }\n```\n```vue\n\u003Cscript setup>\nimport { useRoute } from 'vue-router'\nconst route = useRoute()\nconsole.log(route.params.id)\n\u003C\u002Fscript>\n```\nWhen the URL is `\u002Fuser\u002F42`, what does this log?",[173,175,177,179],{"key":157,"text":174},"`undefined`, because `params` only works with `useRouter`",{"key":160,"text":176},"The full path string `\u002Fuser\u002F42`",{"key":163,"text":178},"The string `\"42\"`",{"key":166,"text":180},"A `Promise` that resolves to `42`","`useRoute()` returns the current route object; `route.params` holds the dynamic segments matched from the path, keyed by the name given in the route config (`:id`). This non-repeatable `id` param is a string, so `route.params.id` is `\"42\"`, not a number.",{"id":183,"topic":9,"difficulty":153,"body":184,"options":185,"correct_key":157,"explanation":194},"019f7766-3003-76a6-9365-a16d9bcf6b65","What is the main difference between `router.push('\u002Fabout')` and `\u003Crouter-link to=\"\u002Fabout\">`?",[186,188,190,192],{"key":157,"text":187},"`router-link` renders a clickable `\u003Ca>` element; `router.push` is the same navigation triggered programmatically from code",{"key":160,"text":189},"`router.push` reloads the whole page, `router-link` does not",{"key":163,"text":191},"`router-link` only works inside `\u003Ctemplate>`, so it cannot navigate at all without `router.push`",{"key":166,"text":193},"They do completely unrelated things — one changes the URL, the other changes component state","Both ultimately call the router's navigation logic; `\u003Crouter-link>` is the declarative, template-friendly way to render a navigable anchor, while `router.push()` is the imperative API for triggering the same kind of navigation from JavaScript (e.g. after a form submits).",{"id":196,"topic":9,"difficulty":197,"body":198,"options":199,"correct_key":160,"explanation":208},"019f7766-3003-7d63-91fc-2944c086d615",2,"```javascript\nconst routes = [\n  { path: '\u002Fproducts', name: 'products', component: ProductList },\n]\nrouter.push({ name: 'products' })\n```\nWhat does this call do?",[200,202,204,206],{"key":157,"text":201},"It throws, because `push` requires a path string, not an object",{"key":160,"text":203},"It navigates to `\u002Fproducts` by resolving the route with the matching `name`",{"key":163,"text":205},"It navigates to a route literally named `\u002F{ name: 'products' }`",{"key":166,"text":207},"It only updates the URL without rendering the matched component","`router.push` accepts either a path string or a location object. When given `{ name: 'products' }`, the router looks up the route whose `name` matches and navigates to its resolved path — this is the standard 'named route' navigation pattern, useful because it decouples navigation code from the literal URL string.",{"id":210,"topic":9,"difficulty":197,"body":211,"options":212,"correct_key":166,"explanation":221},"019f7766-3006-7b69-a38a-4fc6c9ad3bbd","What is the purpose of `router.beforeEach((to, from, next) => { ... })`?",[213,215,217,219],{"key":157,"text":214},"It runs after every route change to clean up leftover DOM elements",{"key":160,"text":216},"It only runs once, when the app first mounts",{"key":163,"text":218},"It replaces `\u003Crouter-view>` with custom rendering logic",{"key":166,"text":220},"It runs before every navigation, letting you inspect\u002Fredirect\u002Fcancel it (e.g. for auth checks)","A global `beforeEach` guard fires before each navigation completes. It is the standard place for cross-cutting checks like 'is the user authenticated' — the guard can call `next()` to proceed, `next(false)` to cancel, or `next('\u002Flogin')` to redirect.",{"id":223,"topic":9,"difficulty":197,"body":224,"options":225,"correct_key":163,"explanation":234},"019f7766-3007-7227-9ab4-fdabd8d05e3e","```javascript\n\u002F\u002F pinia store\nimport { defineStore } from 'pinia'\n\nexport const useCounterStore = defineStore('counter', {\n  state: () => ({ count: 0 }),\n  actions: {\n    increment() { this.count++ }\n  }\n})\n```\nWhat does the `state` option need to be, and why?",[226,228,230,232],{"key":157,"text":227},"A plain object literal `{ count: 0 }`, so Pinia can freeze it for immutability",{"key":160,"text":229},"An `async` function, because state is always fetched from a server",{"key":163,"text":231},"A function returning the initial state object, so each Pinia\u002Fstore instance starts with a fresh state object",{"key":166,"text":233},"A `computed()` call, since state must be derived from other reactive sources","Pinia's `state` option must be a factory function (`() => ({...})`), not a plain object — this mirrors how Vue components define `data()`. The factory gives each Pinia\u002Fstore instance a fresh initial state object, which is especially important when a new Pinia instance is created for each SSR request. Components using the same store in the same Pinia instance still intentionally share that store's state.",{"fields":236,"seniorities":410,"interview_shapes":411,"locales":416,"oauth":418,"question_count":421,"coach_enabled":422,"jd_match_enabled":422},[237,262,270,287,311,324,343,362,384,391,397,404],{"key":238,"name_tr":239,"name_en":239,"sort":153,"specializations":240},"backend","Backend",[241,244,247,250,253,256,259],{"key":242,"name":243,"field":238},"general","Genel",{"key":245,"name":246,"field":238},"go","Go",{"key":248,"name":249,"field":238},"python","Python",{"key":251,"name":252,"field":238},"java","Java",{"key":254,"name":255,"field":238},"csharp","C#\u002F.NET",{"key":257,"name":258,"field":238},"nodejs","Node.js",{"key":260,"name":261,"field":238},"php","PHP",{"key":5,"name_tr":6,"name_en":6,"sort":197,"specializations":263},[264,265,266,267,268,269],{"key":242,"name":243,"field":5},{"key":139,"name":140,"field":5},{"key":145,"name":146,"field":5},{"key":142,"name":143,"field":5},{"key":148,"name":149,"field":5},{"key":135,"name":136,"field":5},{"key":271,"name_tr":272,"name_en":272,"sort":273,"specializations":274},"fullstack","Fullstack",3,[275,276,277,278,279,280,281,282,283,284,285,286],{"key":242,"name":243,"field":271},{"key":245,"name":246,"field":238},{"key":248,"name":249,"field":238},{"key":251,"name":252,"field":238},{"key":254,"name":255,"field":238},{"key":257,"name":258,"field":238},{"key":260,"name":261,"field":238},{"key":139,"name":140,"field":5},{"key":145,"name":146,"field":5},{"key":142,"name":143,"field":5},{"key":148,"name":149,"field":5},{"key":135,"name":136,"field":5},{"key":288,"name_tr":289,"name_en":289,"sort":290,"specializations":291},"devops-cloud","DevOps \u002F Cloud",4,[292,293,296,299,302,305,308],{"key":242,"name":243,"field":288},{"key":294,"name":295,"field":288},"aws","AWS",{"key":297,"name":298,"field":288},"gcp","GCP",{"key":300,"name":301,"field":288},"azure","Azure",{"key":303,"name":304,"field":288},"kubernetes","Kubernetes",{"key":306,"name":307,"field":288},"terraform","Terraform",{"key":309,"name":310,"field":288},"linux","Linux",{"key":312,"name_tr":313,"name_en":313,"sort":314,"specializations":315},"ai-engineer","AI Engineer",5,[316,317,318,321],{"key":242,"name":243,"field":312},{"key":248,"name":249,"field":312},{"key":319,"name":320,"field":312},"llm-rag","LLM\u002FRAG",{"key":322,"name":323,"field":312},"mlops","MLOps",{"key":325,"name_tr":326,"name_en":327,"sort":328,"specializations":329},"database","Veritabanı","Database",6,[330,331,334,337,340],{"key":242,"name":243,"field":325},{"key":332,"name":333,"field":325},"postgresql","PostgreSQL",{"key":335,"name":336,"field":325},"mysql","MySQL",{"key":338,"name":339,"field":325},"mongodb","MongoDB",{"key":341,"name":342,"field":325},"redis","Redis",{"key":344,"name_tr":345,"name_en":346,"sort":347,"specializations":348},"mobile","Mobil","Mobile",7,[349,350,353,356,359],{"key":242,"name":243,"field":344},{"key":351,"name":352,"field":344},"ios-swift","iOS (Swift)",{"key":354,"name":355,"field":344},"android-kotlin","Android (Kotlin)",{"key":357,"name":358,"field":344},"flutter","Flutter",{"key":360,"name":361,"field":344},"react-native","React Native",{"key":363,"name_tr":364,"name_en":365,"sort":366,"specializations":367},"security","Güvenlik","Security",8,[368,369,372,375,378,381],{"key":242,"name":243,"field":363},{"key":370,"name":371,"field":363},"appsec","AppSec",{"key":373,"name":374,"field":363},"offensive-pentest","Offensive \u002F Pentest",{"key":376,"name":377,"field":363},"cloud-security","Cloud Security",{"key":379,"name":380,"field":363},"devsecops","DevSecOps",{"key":382,"name":383,"field":363},"blue-team-incident","Blue Team \u002F Incident",{"key":385,"name_tr":386,"name_en":387,"sort":388,"specializations":389},"qa-test-automation","QA \u002F Test Otomasyonu","QA \u002F Test Automation",9,[390],{"key":242,"name":243,"field":385},{"key":392,"name_tr":393,"name_en":393,"sort":394,"specializations":395},"data-engineer","Data Engineer",10,[396],{"key":242,"name":243,"field":392},{"key":398,"name_tr":399,"name_en":400,"sort":401,"specializations":402},"game-dev","Oyun Geliştirme","Game Development",11,[403],{"key":242,"name":243,"field":398},{"key":405,"name_tr":406,"name_en":406,"sort":407,"specializations":408},"ml-engineer","ML Engineer",12,[409],{"key":242,"name":243,"field":405},[14,15,16],{"junior":412,"mid":414,"senior":415},{"questions":413,"median_sec":3},20,{"questions":413,"median_sec":3},{"questions":413,"median_sec":3},[417,10],"tr",[419,420],"google","github",21750,true]