Routing ਅਤੇ ਇੱਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਪੰਨੇ ਬਣਾਉਣ ਅਤੇ ਉਹਨਾਂ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ .js Navigation ਵਿੱਚ ਜ਼ਰੂਰੀ ਸੰਕਲਪ ਹਨ । .js ਵਿੱਚ ਸਿਸਟਮ ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਅਤੇ ਲਚਕਦਾਰ ਲਾਇਬ੍ਰੇਰੀ ਹੈ । Vue Vue Router routing Vue
route ਇੱਥੇ .js ਵਿੱਚ s ਨਾਲ ਸੰਬੰਧਿਤ ਬੁਨਿਆਦੀ ਧਾਰਨਾਵਾਂ ਹਨ Vue:
-
Route: A route ਇੱਕ ਮਾਰਗ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਸੰਬੰਧਿਤ ਹਿੱਸੇ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਹਰੇਕ route ਦਾ ਇੱਕ ਮਾਰਗ ਅਤੇ ਇੱਕ ਹਿੱਸਾ ਹੁੰਦਾ ਹੈ।
-
Vue Router: .js ਵਿੱਚ s ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ ਹੈ । ਇਹ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ s ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਅਤੇ ਪ੍ਰਬੰਧਨ ਲਈ ਟੂਲ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। Vue Router route Vue route Vue
-
Route ਕੰਪੋਨੈਂਟ: ਹਰੇਕ route ਦਾ ਇੱਕ ਅਨੁਸਾਰੀ ਹਿੱਸਾ ਹੁੰਦਾ ਹੈ। ਜਦੋਂ ਇੱਕ route ਐਕਟੀਵੇਟ ਹੁੰਦਾ ਹੈ, ਸੰਬੰਧਿਤ ਕੰਪੋਨੈਂਟ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾਵੇਗਾ।
-
ਡਾਇਨਾਮਿਕ Route: ਇੱਕ ਡਾਇਨਾਮਿਕ route ਤੁਹਾਨੂੰ route ਡਾਇਨਾਮਿਕ ਪੈਰਾਮੀਟਰਾਂ ਨਾਲ s ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ route ਸੰਬੰਧਿਤ id ਨਾਲ ਉਪਭੋਗਤਾ ਜਾਣਕਾਰੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਮਾਰਗ "/user/:id" ਨਾਲ ਇੱਕ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ।
-
ਨੇਸਟਡ Route: ਇੱਕ ਨੇਸਟਡ route ਇੱਕ ਸੰਕਲਪ ਹੈ ਜੋ ਤੁਹਾਨੂੰ route ਮਾਤਾ-ਪਿਤਾ ਦੇ ਅੰਦਰ ਬੱਚੇ ਨੂੰ ਨੇਸਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ route । ਇਹ ਤੁਹਾਨੂੰ ਗੁੰਝਲਦਾਰ ਢਾਂਚੇ ਬਣਾਉਣ route ਅਤੇ ਨੇਸਟਡ ਤਰੀਕੇ ਨਾਲ ਭਾਗਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ।
-
ਰੀਡਾਇਰੈਕਟ Route: ਇੱਕ ਰੀਡਾਇਰੈਕਟ route ਤੁਹਾਨੂੰ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇੱਕ ਮਾਰਗ ਤੋਂ ਦੂਜੇ ਮਾਰਗ 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਇਹ ਉਦੋਂ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ route ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਪੁਰਾਣੇ ਮਾਰਗ ਤੋਂ ਨਵੇਂ ਮਾਰਗ 'ਤੇ ਜਾਣਾ ਚਾਹੁੰਦੇ ਹੋ।
-
Route ਗਾਰਡ: ਇੱਕ route ਗਾਰਡ ਇੱਕ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਤੁਹਾਨੂੰ route s ਤੱਕ ਪਹੁੰਚ ਦੀ ਜਾਂਚ ਅਤੇ ਨਿਯੰਤਰਣ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਗਾਰਡਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ route, ਤੁਸੀਂ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਕੁਝ ਖਾਸ route ਐਸ ਤੱਕ ਪਹੁੰਚਣ ਤੋਂ ਰੋਕਣ ਲਈ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਰੀਡਾਇਰੈਕਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ ਵਿਸ਼ੇਸ਼ ਹੈਂਡਲਿੰਗ ਕਰ ਸਕਦੇ ਹੋ।
ਵਰਤਣ ਲਈ, ਤੁਸੀਂ ਇਹਨਾਂ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰ ਸਕਦੇ ਹੋ: Vue Router
ਕਦਮ 1: npm ਜਾਂ ਧਾਗੇ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਥਾਪਿਤ ਕਰੋ: Vue Router
ਜਾਂ
ਕਦਮ 2: ਪ੍ਰੋਜੈਕਟ ਦੀ ਰੂਟ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਇੱਕ ਫਾਈਲ ਬਣਾਓ । ਇਸ ਫਾਈਲ ਵਿੱਚ, ਅਸੀਂ ਐਪਲੀਕੇਸ਼ਨ ਦੇ s ਨੂੰ ਘੋਸ਼ਿਤ ਅਤੇ ਸੰਰਚਿਤ ਕਰਾਂਗੇ । router.js
route
ਕਦਮ 3: ਫਾਈਲ ਵਿੱਚ main.js
, ਆਯਾਤ ਕਰੋ ਅਤੇ ਇਸਨੂੰ ਐਪਲੀਕੇਸ਼ਨ ਨਾਲ ਲਿੰਕ ਕਰੋ: Vue Router Vue
ਕਦਮ 4: ਫਾਈਲ ਵਿੱਚ, ਤੁਸੀਂ ਕੰਪੋਨੈਂਟ ਜਿਵੇਂ ਕਿ, , ਅਤੇ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ s ਘੋਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ। router.js
route Vue Router path
component
ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ route ਹੋਮ ਪੇਜ ਲਈ a ਅਤੇ route ਇਸ ਬਾਰੇ ਪੰਨੇ ਲਈ a ਦਾ ਐਲਾਨ ਇਸ ਤਰ੍ਹਾਂ ਕਰ ਸਕਦੇ ਹੋ:
ਕਦਮ 5: ਕੰਪੋਨੈਂਟਸ ਵਿੱਚ Vue, ਤੁਸੀਂ ਕੰਪੋਨੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਹੋਰਾਂ ਦੇ ਲਿੰਕ ਬਣਾਉਣ ਲਈ, ਅਤੇ ਮੌਜੂਦਾ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ । <router-link>
route <router-view>
route
ਉਦਾਹਰਨ ਲਈ, ਹੋਮ ਕੰਪੋਨੈਂਟ ਦੇ ਟੈਮਪਲੇਟ ਵਿੱਚ, ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਪੰਨੇ ਲਈ ਇੱਕ ਲਿੰਕ ਬਣਾਉਣ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ: <router-link>
ਐਪ ਕੰਪੋਨੈਂਟ ਦੇ ਟੈਂਪਲੇਟ ਵਿੱਚ, ਤੁਸੀਂ ਵਰਤਮਾਨ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ: <router-view>
route
ਇਹਨਾਂ ਕਦਮਾਂ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਆਪਣੀ .js ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਅਤੇ ਇਸਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ। Vue Router routing navigation Vue