Using Vue3, why do I get [Vue Router warn]: No match found for location with path "/#/three" and the component does not get loaded with the following code?
var router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes: [
{ path: '/gltf', component: Vue.defineAsyncComponent( () => import('./components/gltf.vue') ) },
{ path: '/box', component: Vue.defineAsyncComponent( () => import('./components/box.vue') ) },
{ path: '/three', component: Vue.defineAsyncComponent( () => import('./components/three.vue') ) },
],
});
Vue.createApp({
router: router,
data(){
return {
}
},
async mounted(){
},
methods: {
},
components: {
},
filters: {
}
})
.use(router)
.mount('#app')
And HTML like this:
<div id="app">
<router-view>
</router-view>
</div>
<script type="module" src="/app.js"></script>
There isn't even a failed attenpt at downloading the module or anything.
Why is that?
Related
this is my router
const router = createRouter({
linkActiveClass: "active",
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: DefaultLayout,
children: [
{
path: 'tucs',
name: 'tucs',
component: () => import('../views/tuc/index.vue'),
},
{
path: 'tucs/:id',
name: 'tuc',
component: () => import('../views/tuc/_id.vue'),
},
]
},
]
})
and this is navigation bar
<div class="side-container">
<router-link to="/tucs">TUC</router-link>
<router-link to="/users">Users</router-link>
</div>
when I am in '/tuc' rout router link get both active and exact-active classes But when I navigate to '/tuc/1' it doesn't get active class
what's the problem ?
http://localhost:8080/#/ this is the local host port that i opened but when i logged in it redirects to http://localhost:8080/?#/ . Then i have to logged in again to have my router go to http://localhost:8080/?#/admin
what is the significance of the question mark
I am using firebase authentication
here is my router index
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Admin from "../views/Admin.vue";
import ManageUsers from "../views/ManageUsers.vue";
import Funds from "../views/Funds.vue";
import CompleteDetails from "../views/CompleteDetails.vue";
import UserFunds from "../views/UserFunds.vue";
import ViewPost from "../views/ViewPost.vue";
import ResetPassword from "../views/ResetPassword.vue";
import Profile from "../views/Profile.vue";
import Overview from "../views/Overview.vue";
import Users from "../views/Users.vue";
import { fb } from "../firebase.js";
import AllUsers from "../views/Allusers.vue"
//User
import User from "../views/User.vue";
import MyProfile from "../views/MyProfile.vue";
import UserDashboard from "../views/Userdashboard.vue";
import Posts from "../views/Posts.vue";
import postEdit from "../views/postEdit.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/admin",
name: "admin",
component: Admin,
meta: { requiresAuth: true },
children: [
{
path: "funds/:user",
name: "funds",
component: Funds,
},
{
path: "userfunds",
name: "userfunds",
component: UserFunds,
},
{
path: "completedetails/:user",
name: "completedetails",
component: CompleteDetails,
},
{
path: "overview",
name: "overview",
component: Overview,
},
{
path: "posts",
name: "posts",
component: Posts,
},
{
path: "postEdit/:postId",
name: "postEdit",
component: postEdit,
},
{
path: "ViewPost/:postId",
name: "ViewPost",
component: ViewPost,
},
{
path: "users",
name: "users",
component: Users,
},
{
path: "allusers",
name: "allusers",
component: AllUsers,
},
{
path: "profile/:user",
name: "profile",
component: Profile,
},
{
path: "manageusers",
name: "manageusers",
component: ManageUsers,
},
],
},
{
path: "/user",
name: "user",
component: User,
meta: { requiresAuth: true, requiresType: true },
children: [
{
path: "myprofile/:user",
name: "myprofile",
component: MyProfile,
},
{
path: "posts",
name: "postsUser",
component: Posts,
},
{
path: "ViewPost/:postId",
name: "ViewPostUser",
component: ViewPost,
},
{
path: "userfunds",
name: "userfundsUser",
component: UserFunds,
},
{
path: "userDashboard",
name: "UserDashboard",
component: UserDashboard,
},
],
},
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/resetpassword",
name: "ResetPassword",
component: ResetPassword,
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = new VueRouter({
routes,
});
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some((x) => x.meta.requiresAuth);
const currentUser = fb.auth().currentUser;
if (requiresAuth && !currentUser) {
next("overview");
} else if (requiresAuth && currentUser) {
next();
} else {
next();
}
});
export default router;
in routing I have next:
{path: 'modules', component: ..., resolve: { modules: ModulesServiceResolver},
{path: 'modules/:id', component: ...}
and when I return back from child component - resolve not called one more time?
array of modules, which I get from modules resolver can be changed when I am in inner page. I want to get them?
how to call resolver one more time when return from child route?
UPD:
modules I have done as separate module
then in modules.routing done next
{
path: '',
component: ModulesComponent,
resolve: {
projects: ModulesService
},
runGuardsAndResolvers: 'always'
},
{
path: ':id',
loadChildren: () => import('./module/module.module').then(m => m.ModuleModule)
}
now works as needed
modules I have done as separate module then in modules.routing done next {
path: '',
component: ModulesComponent,
resolve: {
projects: ModulesService
},
runGuardsAndResolvers: 'always'
},
{
path: ':id',
loadChildren: () => import('./module/module.module').then(m => m.ModuleModule)
}
Here is my router config file;
const appRoutes: Routes = [
{ path: '', redirectTo: 'giris', pathMatch: 'full' },
//Route for Ajax methods
{ path: 'Ajax/*', redirectTo: 'Ajax/*', pathMatch: 'full' },
{ path: 'giris', component: GirisComponent },
{ path: 'biyografi', component: BiyografiComponent },
{ path: 'galeri', component: GaleriComponent },
{ path: 'siirleri', component: SiirleriComponent },
{ path: '**', component: GirisComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
And here is my service codes;
#Injectable()
export class CPService {
private menuLink: string = "Ajax/Menu";
constructor(private _http: Http) {}
getMenu() {
return this._http.get(this.menuLink)
.map((response: Response) => response.json())
.catch(this._errorHandler);
}
_errorHandler(error: Response) {
console.error(error);
return Observable.throw(error || "Server Error");
}
}
And here is my Web Method;
[HttpGet]
public JsonResult Menu() {
var categories = entity.Category.Where(a => a.Active == true && a.Display == true).ToList();
foreach (var item in categories) {
item.RouteUrl = item.RouteUrl.ToLower().Replace("-", "");
}
return Json(categories, JsonRequestBehavior.AllowGet);
}
When i try to access the Web Method it just open a normal web page :( It doesn't call Menu method from AjaxController when i debug.
I'm waiting for your answers. I'm new at Angular :)
I just added the code below to the beginning of my RouteConfig.cs file
routes.MapRoute(
name: "Ajax",
url: "Ajax/{action}/{id}",
defaults: new { controller = "Ajax", action = "Menu", id = UrlParameter.Optional }
);
Then i changed my angular router config file like below (I just removed route for Ajax methods);
const appRoutes: Routes = [
{ path: '', redirectTo: 'giris', pathMatch: 'full' },
{ path: 'giris', component: GirisComponent },
{ path: 'biyografi', component: BiyografiComponent },
{ path: 'galeri', component: GaleriComponent },
{ path: 'siirleri', component: SiirleriComponent },
{ path: '**', component: GirisComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
I have the following url structure:
http://localhost:4200/foo/:fooId/(bar:barId//baz:bazId)
And the following router config:
{
path: 'foo',
children: [
{
path: ':fooId',
component: fooComponent,
children: [
{
path: ':fooId',
component: FooComponent
},
{
path: ':barId',
component: BarComponent,
outlet: 'bar'
},
{
path: ':bazId',
component: BazComponent,
outlet: 'baz'
}
]
}
]
}
If I am at http://localhost:4200/foo/0/(bar:1//baz:2), inside the BazComponent, how can I retrieve the barId parameter from the bar outlet?
import { ActivatedRoute } from '#angular/router';
params: any[] = [];
constructor(private route:ActivatedRoute) {
this.route.parent.children.forEach(children => {
this.params.push(children.snapshot.params);
});
}
ngOnInit() {
console.log(params);
}
// This returns:
// [
// { bar: barId },
// { baz: bazId }
// ]
Use this:
import {ActivatedRoute} from '#angular/router';
constructor(private route:ActivatedRoute){}
barId:number;
ngOnInit(){
// 'bar' is the name of the route parameter
this.barId = this.route.snapshot.params['bar'];
}