it's my first time on the forum,
I started a new app with Angular 8 and I have a problem with routerLink.
In fact, I registered properly (I think) the routes with the path and component associated. When you click on the product-link, you are directed on the details-component.
The problem is when I click on the link, my component appears on the same page and not on the page apart.
Could you please help me find out what is wrong?
Here is registering routes in app-routing.module.ts :
const routes: Routes = [
{path: '', component: ProductDisplayComponent},
{path: 'products/:productId', component: ProductDetailsComponent},
{path: 'cart', component: CartComponent},
];
This is my detail-component.ts :
import { ActivatedRoute} from '#angular/router';
export class ProductDetailsComponent implements OnInit {
product;
constructor(
private route: ActivatedRoute,
) { }
This is routetrLink directive in product-display.component.html :
<div *ngFor="let product of products; index as productId">
<h3>
<a [title]="product.name + ' details'" [routerLink]="['/products', productId]">
{{product.name}}
</a>
</h3>
</div>
Related
import { createRouter, createWebHistory } from 'vue-router';
import about from './views/web/AboutPage.vue';
import support from './views/web/SupportPage.vue';
import iatiStanderd from './views/web/IatiStandard.vue';
import publishingChecklist from './views/web/PublishingChecklist.vue';
import { def } from '#vue/shared';
const routes = [
{
path: '/iati-standard',
name: 'iatiStanderd',
component: iatiStanderd,
},
{
path: '/support',
name: 'Support',
component: support,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
I have set up routes like this.
app.use(router);
and registered like thi in app.ts file
<router-link to="/iati-standard">IATI STANDARD</router-link>
and tried to use route like this.
the url changes but desired component is not rendered. where did i go wrong?
I am using vue with laravel
you should use the name instead of the URL.
In your case:
<router-link :to="{ name: 'iatiStanderd'}"> ... </router-link>
And btw, take care for the name it is iatiStandard not iatiStanderd 🙂
I'm using Angular 12 and am writing a simple group tab app. I'm working on the config page component and the html looks like this:
<br />
<br />
<br />
<p>Configuration 3</p>
<input type="text" placeholder="Some Test" />
In a normal browser, the text and box appears. But if I try to do the same thing via the install to tab path, I don't get the text or input box at all.
I think this might have something to do with routing but can't confirm.
The app-routing-module is pretty simple:
const routes: Routes = [
{
path: '',
component: HomeComponent,
},
{
path: 'configuration',
component: ConfigurationComponent,
},
];
#NgModule({
imports: [
RouterModule.forRoot(routes, {
initialNavigation:
!BrowserUtils.isInIframe() && !BrowserUtils.isInPopup()
? 'enabled'
: 'disabled',
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}
So what does it take to get the SPA to route to the configuration page when used within teams?
Configuration Component: (URL purposed changed to protect the innocent)
import { Component, OnInit } from '#angular/core';
import { Inject, AfterViewInit, ElementRef } from '#angular/core';
import { DOCUMENT } from '#angular/common';
import * as microsoftTeams from '#microsoft/teams-js';
#Component({
selector: 'app-configuration',
templateUrl: './configuration.component.html',
styleUrls: ['./configuration.component.scss'],
})
export class ConfigurationComponent implements OnInit, AfterViewInit {
constructor(
#Inject(DOCUMENT) private document: Document,
private elementRef: ElementRef
) {}
ngOnInit(): void {
microsoftTeams.initialize();
}
ngAfterViewInit() {
console.log('Initializing ms teams');
microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
microsoftTeams.settings.setSettings({
entityId: '',
contentUrl: 'https://test.ngrok.io',
suggestedDisplayName: 'Test',
websiteUrl: 'https://test.ngrok.io',
});
saveEvent.notifySuccess();
});
console.log('Register on save');
microsoftTeams.settings.setValidityState(true);
}
}
Thanks,
Nick
In order to render a tab in Teams. You need to make sure that it is iFramable. Please see the document- Tab requirements.
Make sure that you have given the domain in valid domains in your manifest.
Please share more details like console error, what are you using static tab or config and manifest, if issue isn't solve for you
I traced my problem for this particular question to the line:
initialNavigation:
!BrowserUtils.isInIframe() && !BrowserUtils.isInPopup()
? 'enabled'
: 'disabled',
This example is in a lot of the code for SPAs in and Teams Tabs.
I just have it set to 'enabled' for now and I can get beyond the purpose of this question.
I have a custom Vue-Component located in Laravel default path for it:
resources/js/components/MyComponent.vue
So, I installed Laravel-Nova and want to use the component inside a view partial
resources/views/vendor/nova/partials/user.blade.php
<dropdown-menu slot="menu" width="200" direction="rtl">
<my-component></my-component>
<ul class="list-reset">
<li>
...
Where should I import the Component? In other words, where should I place the:
import MyComponent from '/path/to/my/component/MyComponent.vue'
//and
Vue.component('my-component', MyComponent)
I want to do it some way I can use inside the code of the Vue Component the Nova JavaScript Helpers, like:
this.$toasted.show('It worked!', { type: 'success' })
//or
axios.get('/nova-vendor/stripe-inspector/endpoint').then(response => {
// ...
})
This is an example of a similar component:
import MyLens from './components/views/Lens';
Nova.booting((Vue, router, store) => {
router.addRoutes([{
name: 'nova-improvements',
path: '/nova-improvements',
component: require('./components/Tool'),
}])
});
Nova.booting((Vue, router, store) => {
Vue.component('lens', MyLens)
});
I have a problem with vue routes. I am using laravel 6 with vue#2.6.10
I want to create the actions button in the header dynamically (the actions are different which depends on the component). This AppHeader component is on every component and on the current component I want to create in the header the events for the current component.
For example the component CategoryDetails I want to have two actions in the header (save and exit).
The route foe the category is this:
path: '/',
redirect: 'dashboard',
component: DashboardLayout,
children: [
{
path: '/categories',
component: Category,
name: 'category',
meta: {
requiresAuth: true
}
},
{
path: '/categories/:CategoryID',
component: CategoryDetails,
name: 'category-details',
props: true,
meta: {
requiresAuth: true
}
},
]
In the component CategoryDetails:
<template>
<div>
<app-header :actions="actions"></app-header>
// other code
</div>
</template>
<script>
import AppHeader from "../../layout/AppHeader";
export default {
name: "CategoryDetails",
components: {AppHeader},
data() {
actions: [{label: 'Save', event: 'category.save'}, {label: 'Exit', event: 'category.exit'}],
},
mounted() {
const vm = this;
Event.$on('category.save', function(){
alert('Save Category!');
});
Event.$on('category.exit', function(){
vm.$router.push({name: 'category'});
});
}
}
</script>
I crated the action object which tells the header component what events to emit and listen to them in this component.
In the AppHeader component:
<template>
<div v-if="typeof(actions) !== 'undefined'" class="col-lg-6 col-sm-5 text-right">
{{ btn.label }}
</div>
</template>
<script>
export default {
name: "AppHeader",
props: [
'actions'
],
methods: {
onActionClick(event) {
Event.$emit(event);
}
}
}
</script>
The Event is the "bus event" defined in the app.js
/**
* Global Event Listener
*/
window.Event = new Vue();
So... let`s tested :)
I am in the category component. Click on the category details ... the actions are in the header (save and exit). Click on exit...we area pushed back to the category component... click again to go in the category details and click save ... the alert appears TWICE.
Exit and enter again ... the alert "Save Category!" appears 3 times.....and so on ...
Why ?
I think the issue is not with your routes. I don't know but try testing with your event locally (not globally) in the component of interest. There may be duplicate action (CategoryDetails).
According to this post: https://forum.vuejs.org/t/component-not-destroying/25008/10
I have to destroy the "zombie effect"
destroyed() {
Event.$off('category.save');
Event.$off('category.exit');
}
I have the following setup to my Vue project...
import UploadComponent from './Upload.vue'
import MainPageComponent from './MainPage.vue'
...
const router = new VueRouter({
routes: [
{ path: '/', component: MainPageComponent },
{ path: '/upload', component: UploadComponent }
]
});
...
let App = { router };
new Vue(App).$mount('#km-viewport');
Then in my html I have...
<div id="km-viewport">
<jg-app> </jg-app>
</div>
and inside the jg-app I have the following template...
<md-app-content>
<router-view></router-view>
</md-app-content>
Then in order to make this work with Spring Boot I add the following...
#Controller
public class MainEndpoint {
#GetMapping("")
public String rootRedirect(){return "redirect:/ui";}
#RequestMapping("/ui")
public String root(){
return "splash";
}
#RequestMapping("/ui/upload")
public String upload() { return "forward:/ui"; }
}
The problem is whether I got to <address>/ui or <address>/ui/upload they both show the same MainPageComponent. I can't figure out how to get the upload to show the upload component.
How do I use HTML5 urls with VueJS and Spring Boot?
It is possibly a difference in how Vue is handlings the URLs.
Try activating the history mode for vue-router:
const router = new VueRouter({
mode: 'history', // <=================== added this line
routes: [
{ path: '/', component: MainPageComponent },
{ path: '/upload', component: UploadComponent }
]
});