trying to create aurelia routing in plunker - aurelia

I am working on creating a page in plunker to demo aurelia routing. Here is the link. For some reason, I am unable to show the route in the page. I am able to run similar code in my local environment just fine. I think it is something in plunker that has to be done differently.
Here is the code:
app.html
<template>
<h1>Hello</h1>
<div class="row col-lg-6 col-lg-offset-3">
<div class="btn-group col-sm-offset-1" role="group" aria-label="...">
<a repeat.for="row of router.navigation" class="${row.isActive ? 'active btn btn-primary' : 'btn btn-default'}" href.bind="row.href">
${row.title}
</a>
</div>
<router-view></router-view>
</div>
</template>
app.ts
import { Aurelia, PLATFORM } from "aurelia-framework";
import { Router, RouterConfiguration } from "aurelia-router";
export class App {
router: Router;
// Configure Routing
configureRouter(config: RouterConfiguration, router: Router): void {
console.log("Aurelia routing");
config.title = "Aurelia Routing";
// config.options.root = "/";
config.map([
{
route: "",
redirect: "home",
settings: { icon: "home" }
},
{
route: "home",
moduleId: "./Home",
nav: true,
title: "Home",
settings: { icon: "home" }
},
{
route: "/support",
moduleId: "./Support",
nav: true,
title: "Support Request",
settings: { icon: "home" }
}
]);
this.router = router;
console.log(router);
}
// console.log(this.router);
}
Further details, such as bootstrapping, etc can be found in plunker link.

There's a typo/error in your main.ts:
aurelia.use.basicConfiguration()
Should be:
aurelia.use.standardConfiguration()
Changing this, I saw the console.log messages you put in the configuration, but I got another error, but the routing works now.

Related

How to display components of a child `router-view` that is nested within parent `router-view` in Vue JS?

I am trying to create a side menu (Dashboard's side menu with content) and I have to use multiple router-view.
First router-view is in App.vue that contains all the component.
<div id="app">
<router-view></router-view>
</div>
and the second router-view exists within above router-view as:
<div class="dashboard">
<Sidebar />
<div class="content">
<router-view name="content"></router-view>
</div>
</div>
According to below router/index.js code, if user visits / link, he will be redirected to dashboard page.
const routes = [
{
path: "",
name: "Dashboard",
component: dashboard,
},
{
path: "/messages",
name: "Messages",
components: {
content: Messages,
},
},
{
path: "/profile",
name: "Profile",
components: {
content: Profile,
},
},
{
path: "/settings",
name: "Settings",
components: {
content: Settings,
},
},
{
path: "/dashboard",
name: "Overview",
components: {
content: Overview,
},
},
];
and within above Sidebar component, there're links that upon clicking it shows the content of that link on right side (as in dashboard):
<div class="sidebar">
<div class="title">
Simple Sidebar
</div>
<div class="menu-items">
<router-link to="" active-class="active" tag="button" exact class="side-btn">
<div class="link-container">
Overview
</div>
</router-link>
<router-link to="/messages" active-class="active" tag="button" exact class="side-btn">
<div class="link-container">
Messages
</div>
</router-link>
// ....
</div>
</div>
for the second router-view I added a name as :
<router-view name="content"></router-view>
and then I identified it in router/index.js as:
{
path: "/messages",
name: "Messages",
components: {
content: Messages,
},
},
but it didn't work.
Can anyone help me debug and solve this issue, thank you in advance.
The nested route requires children route configs, which is missing from Dashboard's route config.
Move the route config of Messages into Dashboard's children array:
const routes = [
{
path: "",
name: "Dashboard",
component: dashboard,
children: [
{
path: "/messages",
name: "Messages",
components: {
content: Messages,
},
},
]
},
//...
]

How can I have single Vue component and how each contents in that can be routed by buttons of other component

I am new to Vuejs, I am looking to make my code effective just by having one vue component, and i want to specify the routing only once.
Currently i have one info.vue in a apps directive and prises.vue & priseshigh.vue in more directive. I want to have just one component in more directive. But the problem is in info.vue i have used two buttons, each button routes to prises.vue & priseshigh.vue respectively. Just like below code:
<vs-button class="btn" #click="$router.push({name: 'prises'}).catch(err => {})" >Go To</vs-button>
<vs-button class="btn" #click="$router.push({name: 'priseshigh'}).catch(err => {})" >Go There</vs-button>
My first question: So now i want to know, if i make one component as prisescomplete.vue by combining prises.vue & priseshigh.vue, how do i specify the routing to the buttons respectively in info.vue And what should i use in the prisescomplete.vue component to route the prises.vue & priseshigh.vue contents respectively .
My second question: below is my routing.js, so now what changes should i make in routing if i just have one component in views directive, and also with respect to first question.
{
path: '/apps/info',
name: 'info',
component: () => import('./views/apps/info/Info.vue'),
meta: {
rule: 'editor',
no_scroll: true
}
},
{
path: '/apps/info/info-more/prises-card',
name: 'prises',
component: () => import('./views/apps/info/more/prises.vue'),
meta: {
pageTitle: 'info-more',
rule: 'editor',
no_scroll: true
}
},
{
path: '/apps/info/info-more/priseshigh-card',
name: 'priseshigh',
component: () => import('./views/apps/info/more/priseshigh.vue'),
meta: {
pageTitle: 'info-more',
rule: 'editor',
no_scroll: true
}
},
Please send me the modified code, so that i can understand it easily.
You could pass props to route components.
https://router.vuejs.org/guide/essentials/passing-props.html
{
path: '/apps/info/info-more/prises-card',
name: 'prises',
component: () => import('./views/apps/info/more/prisescomplete.vue'),
props: {
prisesType: "prises"
},
meta: {
rule: 'editor'
}
},
{
path: '/apps/info/info-more/priseshigh-card',
name: 'priseshigh',
component: () => import('./views/apps/info/more/prisescomplete.vue'),
props: {
prisesType: "priseshigh"
},
meta: {
rule: 'editor'
}
}
PrisesComplete.vue
<template>
<div>
<span v-if="prisesType === 'prises'"> Prises </span>
<span v-else-if="prisesType === 'priseshigh'"> Prises High </span>
</div>
</template>
<script>
export default {
name: "PrisesComplete",
props: {
prisesType: {
type: String,
required: true
}
}
}
</script>
Also, you could use to="/path"
https://router.vuejs.org/guide/essentials/named-routes.html
<vs-button class="btn" :to="{ name: 'prises' }"> Go To </vs-button>
<vs-button class="btn" :to="{ name: 'priseshigh' }"> Go There </vs-button>
First of all you need to write a navigation.vue component for the navigation and render inside app with routerview. Look the codesandbox and the describtion
TheNavigation.vue
<template>
<div>
<vs-button
class="btn"
#click="$router.push({ name: 'prises' }).catch((err) => {})"
>Prises</vs-button
>
<vs-button
class="btn"
#click="$router.push({ name: 'priseshigh' }).catch((err) => {})"
>Priseshigh</vs-button
>
</div>
</template>
then render the navigation bar with the router view for loading the router.Here is the
App.vue where you render the navigation and routerview.
<template>
<div id="app">
<TheNavigation/>
<hr>
<RouterView/>
</div>
</template>
<script>
import TheNavigation from "./components/TheNavigation";
export default {
name: "App",
components: {
TheNavigation
}
};
</script>
RouterView is reponsible for loading the components which are defined inside router.js
Here is the Router.js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const router = new Router({
mode: "history",
routes: [
{
path: "/prises-card",
name: "prises",
component: () => import("./components/Prises.vue"),
meta: {
pageTitle: "info-more",
rule: "editor",
no_scroll: true
}
},
{
path: "/priseshigh-card",
name: "priseshigh",
component: () => import("./components/PrisesHigh.vue"),
meta: {
pageTitle: "info-more",
rule: "editor",
no_scroll: true
}
}
]
});
export default router;

Vue router dynamic link and children reload page - not load correctly component

I add to my routes file path with children:
path: '/warehouse/:id',
name: 'ShowWarehouse',
component: ShowWarehouse,
children: [{
path: 'edit',
name: 'EditWarehouse',
component: EditWarehouse
}
]
Now in component ShowWarehouse I have:
<div v-if="!changeEdit">
<div v-if="warehouseData">
<div>Name: {{ warehouseData.warehouse.name }}</div>
<div>
<router-link
:to="{ name: 'EditWarehouse', params: {id: warehouseData.warehouse.id }}"
>Edit</router-link>
</div>
</div>
</div>
<router-view v-else></router-view>
When the user click edit button I need load component EditWarehouse, but component ShowWarehouse must be disappear, and if user back (without /edit) disappear componet EditWarehouse and load component ShowWarehouse. I write method in watch:
watch: {
$route() {
if (this.$route.path == '/warehouse/' + id_get_from_API + '/edit') {
this.changeEdit = true;
} else {
this.changeEdit = false;
}
}
},
The problem is when the user is at mydomain.com/warehouse/23/edit and click reload page (F5), then Vue loads component ShowWarehouse instead of loading EditWarehouse.
I using mode: 'history'.
Problem:
From the Vue.JS website: "Vue does provide a more generic way to observe and react to data changes on a Vue instance: watch properties." When you refresh the page the watch() method will not be executed because it is a new Vue instance and no data has changed on the Vue instance yet. You should probably use a different pattern to determine which component to show. (https://v2.vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property)
Solution:
I suggest making the EditWarehouse a sibling route to ShowWarehouse, and make EditWarehouse its own component (you already have this). Your router-link in the ShowWarehouse component can stay the same.
Code Snippet:
const ShowWarehouse = {
template: `<div><h1>ShowWarehouse</h1> <div v-if="warehouseData">
<div>Name: {{ warehouseData.warehouse.name }}</div>
<div>ID: {{ $route.params.id }}</div>
<div>
<router-link :to="{ name: 'EditWarehouse'}">Edit</router-link>
</div>
</div></div>`,
computed: {
warehouseData: function() {
let data;
let id = this.$route.params.id;
if (id) {
data = {
warehouse: {
name: 'Some Warehouse Name',
id: id
}
}
}
return data;
}
}
};
const EditWarehouse = {
template: "<h1>EditWarehouse [{{ $route.params.id }}]</h1>"
}
const router = new VueRouter({
routes: [{
path: '/warehouse/:id',
name: 'ShowWarehouse',
component: ShowWarehouse
},
{
path: '/warehouse/:id/edit',
name: 'EditWarehouse',
component: EditWarehouse
}
]
});
new Vue({
el: '#app',
router
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<p>
<router-link :to="{ name: 'ShowWarehouse', params: { id: 123 }}">Go to Warehouse 123</router-link>
</p>
<router-view/>
</div>
Here is a jsfiddle with the same code:
https://jsfiddle.net/austinwasinger/oruswb3a/39/

how to programmatically return to Vue cli's pre-made Home.vue

I'm using Vue CLI 3 and it makes a few routes. One is Home.vue. In my program I am trying to programmaticaly go to different pages. I added the routes I need in router.js but kept the already created routes for Home.vue and About.vue. It works fine until I get to 'Home' and get a warning: [vue-router] Route with name 'Home' does not exist.'
Here is the code:
<template>
<div class='secondItem'>
<h4 v-for="item in menuItems"
#click="bindMe(item)" v-bind:class="{'active':(item === current)}">{{item}}</h4>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
current: '',
menuItems: ['Home', 'About', 'Portfolio', 'Contact'],
}
},
methods: {
bindMe(item) {
this.current = item;
this.$router.push({
path: item
})
}
}
}
<script>
Are you using named routes? In that case you need to use name instead of path:
this.$router.push({
name: item
})
Also, your example can be simplified quite a lot. Try this:
<template>
<div class="secondItem">
<router-link :to="{ name: item }" tag="h4" active-class="active" v-for="item in menuItems" v-bind:key="item">{{item}}</router-link>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
menuItems: ['Home', 'About', 'Portfolio', 'Contact']
}
}
}
<script>

active class handle for parent/child routers in aurelia

Am new to aurelia, i have a main menu in left side, one of the menu(mail) is having sub-menus (inbox,sent,trash). i need to do if the sub menu is active(#current URL, #activeclass, #CSS ) needs to keep active class for the parent menu (mail).
app.js
export class App {
configureRouter(config, router){
config.title = 'DMS';
config.map([
{ route: ['dashboard',''], name: 'Dashboard',
moduleId: './templates/dashboard/dashboard', nav: true, title:'Dashboard',settings:{'img' : 'ic-dashboard.png'} },
{ route: ['settings'], name: 'Settings',
moduleId: './templates/settings/settings', nav: true, title:'Settings' ,settings:{'icon' : 'settings'} },
{ route: ['inbox'], name: 'inbox',
moduleId: './templates/mail/inbox/inbox', nav: true, title:'Mail' ,settings:{'img' : 'mail.png'} },
{ route: ['inbox/trash'], name: 'trash',
moduleId: './templates/mail/trash/trash', title:'Mail' },
{ route: ['inbox/sent'], name: 'sent',
moduleId: './templates/mail/sent/sent', title:'Mail'},
]);
this.router = router;
}
}
Menu list also applying active class
<div class="row col s12 ${row.isActive ? 'active' : ''}" repeat.for = "row of router.navigation" >
<a href.bind = "row.href">
<div class="col s2 " >
<div if.bind="row.settings.img">
<img src="src/assets/${row.settings.img}">
</div>
<div if.bind="row.settings.icon">
<i class="tiny material-icons">${row.settings.icon}</i>
</div>
</div>
</a>
</div>
sub-menu url
<div class="col s8 offset-s2 mail_actionLst">
<ul>
<li class="inbox mail_active"> Inbox <span>(43)</span> </li>
<li class="sent">Sent </li>
<li class="trash">Trash</li>
</ul>
</div>
How to set parent class active.
Because these are different routes, not parent + children.
You should describe child route in parent class.
You can add code to inbox.js:
configureRouter(config, router){
config.map([
{ route: ['trash'], name: 'trash',
moduleId: 'path_to_trash', title:'Mail' },
{ route: ['sent'], name: 'sent',
moduleId: 'path_to_sent', title:'Mail'},
]);
this.router = router;
}
Don't forget to add
<router-view></router-view>
to inbox.html.