Hi i have a situation where i need to support multiple wildcard for same route.
i will be routes like this
const routes = [
{path:'/browse',name:'browse',component:Home,children:
[
{path:'files/:zip_id',name:'FolderBrowse',component:FolderBrowse},
{path:'files/:folder_id',name:'FolderBrowse',component:FolderBrowse},
]
}
];
my path in browser will look like this http://localhost:8080/browse/files/123
for each double click on folder or zip i will call a common function like this
browseCommonFunction(folderObj){
let query = {};
if(Object.hasOwnProperty.call(folderObj,'zip_id')){
query.zip_id = folderObj.zip_id;
}
if(Object.hasOwnProperty.call(folderObj,'folder_id')){
query.zip_id = folderObj.folder_id;
}
// do ajax call
}
on double click of either zip or folder i'm calling like this
doubleclick(){
this.browseCommonFunction(this.$route.params);
}
Problem: the ajax call will match only folder or zip
please help me thanks in advance !!
Related
I would like to know if there is possibility to download file from Sanity with HTTP request?
I only have reference ID:
{
file: {
asset: {
_ref: "file-fxxxxxxxxxxxxxxxxxxxx-xlsx"
_type: "reference"
}
}
}
I would like to do this is this scenario:
<a href="https://cdn.sanity.io/assets/clientID/dataset/file-xxxxxxxxxxx-xlsx">
Download File
</a>
You can, indeed 🎉 With a bit of custom code you can do it just from the _ref, which is the file document's _id
Creating the URL from the _ref/_id of the file
The _ref/_id structure is something like this: file-{ID}-{EXTENSION} (example: file-207fd9951e759130053d37cf0a558ffe84ddd1c9-mp3).
With this, you can generate the downloadable URL, which has the following structure: https://cdn.sanity.io/files/{PROJECT_ID}/{DATASET}/{ID_OF_FILE}.{EXTENSION}. Here's some pseudo Javascript code for the operation:
const getUrlFromId = ref => {
// Example ref: file-207fd9951e759130053d37cf0a558ffe84ddd1c9-mp3
// We don't need the first part, unless we're using the same function for files and images
const [_file, id, extension] = ref.split('-');
return `https://cdn.sanity.io/files/${PROJECT_ID}/${DATASET}/${id}.${extension}`
}
Querying the URL directly
However, if you can query for the file's document with GROQ that'd be easier:
*[(YOUR FILTER HERE)] {
file->{ url } // gets the URL from the referenced file
}
You can do the same with images, too.
I have a very simple 'named' Nuxt middleware set up (taken from the docs) which checks in the store to see whether a user is authenticated before they can navigate to certain routes. If the user is not authenticated, they are directed to a straightforward form in which they have to provide an email address to gain access (at http://example.com/access). All of that works fine, after they fulfil the middleware's store.state.authenticated check they can navigate around no problem.
export default function ({ store, redirect }) {
if (!store.state.authenticated) {
return redirect('/access')
}
}
My question is, once the user has entered their email address, I have no way of knowing what route they were initially trying to access. I've looked at other questions here about passing data between routes but because of the way the middleware works these solutions don't seem to be feasible.
I really would rather not set the slug in the vuex state as this will lead to a whole other set of complications – I also don't mind setting the intended slug as a query or a param on the /access url. I have read through the docs for the Nuxt redirect function and realise you can pass a route.query as an argument. So it seems that you could potentially do something like this:
return redirect('/access', intendedSlug)
...or, if using params(?):
return redirect(`/access/${intendedSlug}`)
But I don't know how to pass that intendedSlug value to the middleware in the first place as it's not exposed on the context passed to the function or anywhere else. It seems like this would be a common problem, but I can't find any simple solutions – any help would be really appreciated!
To help #Bodger I'm posting how I resolved this, it may not be perfect and it's working on a slightly older version of Nuxt (I know 😵!) but this is how I resolved the issue.
.../middleware/authenticated.js
export default function (context) {
const path =
context.route.path.length && context.route.path[0] === '/'
? context.route.path.slice(1)
: context.route.path
const pathArray = path.split('/')
if (process.server && !context.store.state.authenticated) {
return context.redirect('/access', pathArray)
} else if (!context.store.state.authenticated) {
return context.redirect('/access', pathArray)
}
}
The pathArray is then accessible in my /access page.
.../pages/access.js
data() {
return {
attemptedRoutePathArray: Object.values(this.$route.query)
...
}
},
...
computed: {
attemptedRouteURL() {
return new URL(
this.attemptedRoutePathArray.join('/'),
process.env.baseUrl
)
},
...
}
I need to generate a vue-router link that contains an array with string keys as a query parameter.
I want the resulting URL to look like
url?param[key]=value
I need these kinds of query parameters to match an existing backend infrastructure, so renaming/refactoring them is not an option.
I've tried to use a router-link like the one below, but the param object just get's serialized as %5Bobject%20Object%5D. Maybe there is an option to change the way this object is serialized within vue-router?
<router-link :to="{name: 'xyz', query: {param: 'value'}}">link</router-link>
Does anyone have helpful input? Thank you :)
After spending some time vue-router GitHub issues and their docs, I figured it out.
When creating your RouteConfig, import qs and set the parseQuery and stringifyQuery methods as follows:
parseQuery: (query: any): object => {
return qs.parse(query);
},
stringifyQuery(query: any): string {
let result = qs.stringify(query, {encode: false});
return result ? ('?' + result) : '';
}
It is important to include {encode: false}, otherwise the square brackets will get URL encoded.
Addition to Martin's comment,
Exact Router config should be :
// https://github.com/ljharb/qs
import qs from 'qs';
const router = new Router({
routes: [
// ...
],
// set custom query resolver
parseQuery(query) {
return qs.parse(query);
},
stringifyQuery(query) {
var result = qs.stringify(query);
return result ? ('?' + result) : '';
}
});
and query parameters inside routes will be automatically converted url string and parsed as an object when accessing $router.query .
I would like to ask if can I implement this on vuejs, so basically the code will load a page/template base on the param url. I've been searching for a while and can't get the results I need or maybe I'm just searching a wrong keyword.
My url is like this, so I just can't manually declare the url in my route because it is dynamic, fetch from the database.
path: '/user/page_type
Thank you very much!
export default {
mounted () {
if(this.$routes.params.page_type == "home"){
// Load Homepage Here
// ../../../page/HomePage.vue
}
else if(this.$routes.params.page_type == "speaker"){
// Load Speakerpage Here
// ../../../page/HomePage.vue
}
else if(this.$routes.params.page_type == 'html'){
// Load HTML Page Here
// ../../../page/HtmlPage.vue
}
}
}
This is available out of the box within official addon vue-router.
Docs for your case: link
Given a page retrieved at for example:
http://myapp.dev/path/subfolder?param=abc
Whenever the additional GET parameter called param is present it should be added automatically to all subsequent links in my navigation as constructed in the .volt template. For example:
Go to subfolder 2
I.e. based on this .volt link the the goal is to generate:
Go to subfolder 2
If you want to append Query string parameters only for given links you can go with Luke's solution.
However I think you want to achieve something a bit different and it involves custom logic. For this to happen we should create a custom Volt function.
Custom function definition:
public static function urlFor($params, $queryStringParams = [])
{
$di = \Phalcon\DI::getDefault();
if ($di->getRequest()->has('param')) {
$queryStringParams['param'] = $di->getRequest()->get('param');
}
return $di->getUrl()->get($params, $queryStringParams);
}
The above function acts the same as url() function in Phalcon, it just allows us to write a bit of custom logic before passing the parameters to url().
In your case we check if URL contains desired query param and we add it to every URL generated on the current request. In my case the above function is in Helper file so I can use it anywhere I need to.
This is our View service definition:
$di->set('view', function() use ($di) {
$view = new \Phalcon\Mvc\View();
...
$view->registerEngines([
'.phtml' => function($view, $di) {
$volt = new \Phalcon\Mvc\View\Engine\Volt($view, $di);
$options = [
'compiledPath' => $di->getConfig()->site->path->cache . 'volt/frontend/',
'compiledExtension' => '.php',
'compileAlways' => $di->getConfig()->debug,
];
$volt->setOptions($options);
...
// IMPORTANT PART: Overwriting default url() function in Volt
$compiler = $volt->getCompiler();
$compiler->addFunction('url', function($resolvedArgs, $exprArgs){
return 'Helpers\Common::urlFor(' . $resolvedArgs . ')';
});
return $volt;
}
]);
return $view;
});
Please note the IMPORTANT PART comment in the above code block.
Let us finish with example:
User is on this address:
http://myapp.dev/path/subfolder?param=abc
But somewhere in your code you want to generate a link to News page:
News
Our code will catch the param in the URL and will generate the following address:
http://myapp.dev/news/list?param=abc