How I can fetching the name of redirected from router in a vue component not in router.js
For exemple in created hook or in a method:
if (redirectedFrom.name == 'foo')
do something
else do another things
Related
It's basically a simple task: I'm using Vue3 with the Vue Router, there's my Home.vue component which lives in the / route, then there's a ProductDetails.vue component which lives in the /product route.
I want to execute a certain action when the user is navigating to my / route. However, I only want this action to happen when the user directly navigates here, meaning via clicking a link or via the browser's URL bar. I don't want the action to execute when he is navigating back from ProductsDetails.vue (or routing via "back" from anywhere, for that matter).
How do I achieve this with Vue3 or Vue Router methods? I know I can probably do it with query parameters in my URL but I'd prefer not to.
You could use in-component navigation guards (read more about it here (options api) OR here (composition api))
Your code could look something like this
...
beforeRouteEnter(to, from, next) {
if(from.path === '/') {
// do something
}
},
...
I have an external web site and vue app on the same domain. I want programmatically redirects a user from vue app to external web site with a full page reload.
Example
http://example.com --> vue + vue-router App
http://example.com/external-site --> external web site
In Vue 2.x, you can create a route that will go to an external URL by adding a route like this:
{
path: "/Stackoverflow",
component: Stackoverflow,
beforeEnter(to, from, next) {
window.location.href = "https://stackoverflow.com";
}
}
Activate using:
this.$router.push({ path: '/Stackoverflow' });
All you need is:
window.location.href = "http://example.com";
Should I always be using <router-link> over <a> even if I am linking to something like a social media page outside the app?
<router-link> is intended for in-app links (e.g., to a page within your app). Use <a> for external links.
Router link : if we use router link the page will not reload but with <a> link the navigation occured through page refresh.
‘vue-router’ is a separate package to Vue and is installed by ‘webpack’.
Routes are set up in router/index.js
Import to Router from vue-router which is in node_modules.
import Router from 'vue-router'
... new Router...
creates an instance of Router which is an object with a property ‘routes’ which is an array of object. Each of those objects is a route with properties for ‘path’, ‘name’ which is what it is called and ‘component’, the component that is called when the route is used.
{
path: '/about',
name: 'About',
component: About
}
We need to import the component and we use the # which brings the path to the root of the project which is the ‘src’ directory.
import About from '#/components/About'
The component gets loaded into the root component App.vue using,
<router-view/>
and where that tag is in the App.vue. This would allow us to place a navbar, header and footer for example around this About component. So that when you go to …/about only the about component in the page changes and the whole page doesn’t refresh.
Next create a NavBar component and place it in the App.vue template.
This will work,
About
however in vue it should be done like this,
<router-link to="/about>About</router-link>
When <router-link> is rendered to the browser it becomes <a> so in the css we still reference it as ‘a’ not as ‘router-link’.
We can data bind using the ‘to’ attribute in <router-link>like this,
:to={ name: 'About'}
where ‘name’ is the property in the ‘routes’ array of object in the main.js routes. This makes the route dynamic.
Using this data bind to change to ‘/about’ to something else such as ‘abt’ you only need to change,
path: 'abt',
in the routes array of objects.
I use Vue and VueRouter (and also Vuex but it is not the case here) in my project. Imagine i have 5 files:
main.js - stores all components definitions, imports them from
external files and so on.
App.vue - it is main component that stores
all other
routes.js - stores all the routing definitions
login.vue -
stores login component (login page)
content.vue - stores page
component
(quite simplified version but you surely get the idea).
Now if i open my path '/' it should reroute me to '/login' page if i am not logged in and to '/content' when i am logged in. Nothing special here.
Now my page works as intended (almost). If I enter in my browser '/content' it tries to render '/content' component with default data (ie userId = -1), then immediately it reroutes me to '/login' page. The '/content' shows just for a second. And it is my problem. I would like to reroute to '/login' without earlier rendering '/content' with default data.
It is obvious that it tries to render '/content' - maybe from cache or something, but since rerouting is my first command in created() it should not
mount /content component in app component, but /login.
Any idea how to prevent it?
I am aware that i do not attach any code, but i hope it wont be necessery for you to understand the problem and advice any solution because it would need cutting and simpliding a lot of code.
In your case, I think you should use vue router's beforeEach hook.
You can use meta field in router to indicates whether the path need authentication, and do processing in beforeEach function.
I will give the sample code.
import Router from 'vue-router';
const router = new Router({
routes: [{
path: '/content',
meta: {
auth: true,
}
}, {
path: '/login',
}]
});
router.beforeEach(async (to, from, next) => {
if (to.matched.some(m => m.meta.auth)) {
// user your authentication function
const isAuth = await getAuthentication;
if (!isAuth) {
next('/login');
}
next();
}
})
if your authentication function is not async function, you should remove async/await keywords
Except if the API in the meantime declares that you are no longer authenticated, the router will not be able to refresh itself by the beforeEach method.
Even with a loop method that retrieves data from the API, which will store them in the store as reactive data.
In Vue everything can be reactive, except Vue router
So In my laravel app we have a url say
http://mywebsite.in/wfengine/search/
Now I want to use the laravel router to work on the above link , but nothing seems to be happening.
Router.js
import VueRouter from 'vue-router';
let routes = [
{
path:'/filters',
componenet: require('./views/filter')
}
];
export default new VueRouter({
routes
});
App.js
`import router from './routes';
// import './core/searchableCards';
var app = new Vue({
el:'#ep_result_1',
router
})`
HTML
<router-link to="/filters">Search Page</router-link>
Now on the page which is loaded by laravel , I get following url in the browser
http://mywebsite.in/wfengine/search/#filters
But the template is not loading , can anyone help me out with this
According to me the Vue Router is just doing some Dom hide and show so it should not be effected by the base url right ?
Vue router mounts the components (defined in the routes array).
So if you defined a laravel routes to wfengine/search/ for the (e.g.) search.blade.php there should be the <router-view></router-view> dom element, as the doc says.
After that you should define the vue-router:
const router = new VueRouter({
mode: 'history',
routes
})
The routes variable is the routes array, the mode is for use the vue routing without # (http://mywebsite.in/wfengine/search/#filters -> http://mywebsite.in/wfengine/search/filters).
After that you should register the url (wfengine/search/filters) in the web route in laravel, what is give back the search.blade.php or that "base page" what contains the <router-view> dom.
So 1. there should be a base php view, what contains the <router-view>.
2. Then register the urls in the server side what gives back the same base view. 3. Then the vue-router will decide which component should be loaded by the end of the url.
At the end of your routes/web.php file just put the below code. This tricks works for me.
// At the end of the file
Route::get('/{vue_capture?}', function () {
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');
Of course you have to put a <router-view></router-view> into your layout or blade file.