I am using Vuejs. This is main js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router
}).$mount('#app')
This is router:
import Vue from 'vue';
import VueRouter from 'vue-router';
import ControlExcel from './components/ControlExcel';
import Login from "./components/Login";
import blog from './components/blog';
import file from './components/file';
Vue.use(VueRouter);
let routes = [
{
path: '/control-excel',
name: 'ControlExcel',
component: ControlExcel
}
,
{
path: '/loginn',
component: Login
}
,
{
path: '/blog',
name: 'blog',
component: blog
}
,
{
path: '/file',
name: 'file',
component: file
},
];
export default new VueRouter({
mode: 'history',
base: "",
routes
})
and this app vue:
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">-->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/>-->
<!-- <ControlExcel />-->
<!-- <component v-bind:is="component" />-->
<span>abcd</span>
<li class="nav-item">
<router-link class="nav-link" to="/control-excel">exce</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/loginn">loginn</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/blog">blog</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/file">file</router-link>
</li>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
// import Login from './components/Login.vue'
// import ControlExcel from "./components/ControlExcel";
// import Login from "./components/Login";
import file from './components/file';
import Vue from 'vue';
Vue.component('file',file);
// import DownloadExcel from './components/DownloadExcel'
export default {
name: 'app',
components: {
// Login,
// ControlExcel,
}
,
data() {
return {
// component: "Login"
}
}
}
</script>
At localhost:8080, i see those:
abcd
exce
loginn
blog
file
When i click any of them, URl changes. for example
http://localhost:8080/file
for file but it does not bring component.
for example for file:
{
path: '/file',
name: 'file',
component: file
},
that component file.vue
<template>
<div class="blog">
<h1>fasfsasd</h1>
</div>
</template>
<script>
export default{
name:'file'
}
</script>
<style scoped>
</style>
This is directory:
src
-components
--blog.vue
--ControlExcel.vue
--file.vue
--Login.vue
router.js
main.js
App.vue
Why cant it bring template also?
There is dynamic component but i dont want to use it and it does not seem best practice, like this:
<component v-bind:is=”currentComponent”></component>
https://blog.logrocket.com/how-to-make-your-components-dynamic-in-vue-js/
Your Vue-Router does not change the main component, but only puts the component of the URL that matches into <router-view></router-view>, which you don't have.
You need to add it to your main component.
For example like this:
<div id="app">
<span>abcd</span>
<ul>
<li class="nav-item">
<router-link class="nav-link" to="/control-excel">exce</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/loginn">loginn</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/blog">blog</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/file">file</router-link>
</li>
</ul>
<router-view></router-view>
</div>
Related
My router has:
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [{
path: '/',
name: 'login',
component: Login,
},
{
path: '/app',
component: Container,
children: [{
path: '',
name: 'home',
component: Home
}]
},
],
});
My Container.vue has:
<template>
<div>
<Navigation />
<router-view />
</div>
</template>
<script>
import Navigation from "./Navigation.vue";
export default {
name: "Container",
props: {
msg: String
}
};
</script>
But I get an error:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> at src/components/Container.vue
at src/App.vue
In my Navigation.vue, I have
<template>
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a
class="flex-sm-fill text-sm-center nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a>
</nav>
</template>
<script>
export default {
name: "Navigation"
};
</script>
You're missing to add components:{Navigation} in Container.vue component
export default {
name: "Container",
props: {
msg: String
},
components:{Navigation}
};
My vue-router routes the URL on all menu buttons correctly, but does not show each Vue component properly. A demonstration can be found here.
Inside of my HTML (I am using Vuefy)
<div class="navbar-start">
<a class="navbar-item">
<router-link to="/" class="router-link"> // <-- THIS WORKS
Home
</router-link>
</a>
<a class="navbar-item">
<router-link to="/items" class="router-link"> // <-- THIS WORKS
My Products
</router-link>
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
<router-link to="/information" class="router-link"> // <-- DOES NOT WORK
Info
</router-link>
</a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item">
<router-link to="/about" class="router-link"> // <-- THIS WORKS
About
</router-link>
</a>
<a class="navbar-item">
<router-link to="/terms" class="router-link"> // <-- DOES NOT WORK
Terms
</router-link>
</a>
</div>
</div>
</div>
My router.js file is set up the following:
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue')
},
{
path: '/new',
name: 'create-item',
component: () => import('./views/CreateItem.vue')
},
{
path: '/',
name: 'home',
component: Home
},
{
path: '/items',
name: 'my-items',
component: () => import('./views/MyItems.vue')
},
{
path: '/signin',
name: 'sign-in',
components: () => import('./views/SignIn.vue')
},
{
path: '/terms',
name: 'terms',
components: () => import('./views/Terms.vue')
},
{
path: '/information',
name: 'info',
components: () => import('./views/Info.vue')
}
]
})
Additionally, my App.vue file shows the router-view properly, along with the menu.
<template>
<div id="app">
<div id="nav">
<Menu/>
</div>
<router-view/>
</div>
</template>
<script type="text/javascript">
import Menu from '#/components/Menu.vue'
export default {
components: {
Menu
}
}
</script>
The following is a photograph of my navigation. To repeat, clicking on 'info' and 'terms' (submenu of info) do not load their respective Vue components, but does change the URL.
I triple-checked my syntax and checked the documentation, but could not seem to find my error. The platform at which my code is hosted at can be found here. Any help would be appreciated. Thanks, Edwin.
I found the error. I spelled 'component' instead of 'components' several times in my routes.js file.
Somehow my routes doesn't work? I have seen so many videos about routing in vuejs. And all others do it that way. Is it a bug or what can i do ?
Menu.vue:
<template>
<div class="Menu">
<div class="div" style="margin-top:70px;">
<header class="main-header">
<nav class="main-nav">
<ul class="nav-links">
<router-link to="/"><img id="logo" src="assets/Vue.js_Logo.png"></router-link>
<h2 class="nav-link" style="color:white;">Vue.js</h2>
<router-link class="nav-link" tag="li" to="/"><a>Home</a></router-link>
<router-link class="nav-link" tag="li" to="/info"><a>Info</a></router-link>
<router-link class="nav-link" tag="li" to="/ITkompetencer"><a>IT Kompentencer</a></router-link>
<router-link class="nav-link" tag="li" to="/about"><a>Om mig</a></router-link>
</ul>
</nav>
</header>
</div>
</template>
<script>
export default {
name: 'Menu'
}
</script>
app.vue:
<template>
<div id="app">
<Menu></Menu>
<router-view></router-view>
</div>
</template>
<script>
import Menu from './components/Menu'
import Hello from './components/Hello'
export default {
name: 'App',
components: {
Hello,
Menu
}
}
</script>
I hope there are so genius guys out there :)
First, You need define these routes in main.js
// entry file: main.js or app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Hello from './components/Hello'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
// the home page
{ path: '/', component: Hello }
]
})
new Vue({
router,
render: h => h(App), // the layout
})
It's easy: https://router.vuejs.org/guide/
I have problem with my child routing in Angular 4. It isn't working while the parent routing is working. When i hover over the "Create New Account", it still is on the Account. It shows localhost:4200/account. It must be localhost:4200/account/create-account. The Parent route is on app.component.ts while the child route is on the account.component.html
//sidebar.component.ts
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li routerLinkActive="active" class="dropdown" appDropdown><a style="cursor: pointer;" routerLink="/account">Account</a>
<ul class="dropdown-menu">
<li><a style="cursor: pointer;">Create New Account</a></li>
<li><a style="cursor: pointer;">View Account</a></li>
</ul>
</li>
<li routerLinkActive="active"><a routerLink="/news">News</a></li>
</ul>
//app-routing.module.ts
import{ NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AccountComponent } from './account/account.component';
import { CreateAccountComponent } from './account/create-account/create-account.component';
import { ViewAccountComponent } from './account/view-account/view-account.component';
import { AccountStartComponent } from './account/account-start/account-start.component';
import { NewsComponent } from './news/news.component';
const appRoutes: Routes = [
{ path: '', redirectTo: '/account', pathMatch: 'full' },
{ path: 'account', component: AccountComponent, children: [
{ path: '', component: AccountStartComponent },
{ path: 'create-account', component: CreateAccountComponent },
{ path: 'view-account', component: ViewAccountComponent },
]},
{ path: 'news', component: NewsComponent }
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
//app.component.ts
<app-header></app-header>
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>
//account.component.html
<div>
<router-outlet></router-outlet>
</div>
You need to configure the routerLink
<li><a style="cursor: pointer;" routerLink="./create-account">Create New Account</a></li>
Is it possible to hide the vue-router from my login page? If so, how would I do that? On every page I have I see the menu, but on the Login page I don't want to see it.
Here is my code:
Login
<template>
<div>
<h1>Login</h1>
<form action="">
<label>naam</label>
<input type="text">
</form>
</div>
</template>
<script>
</script>
<style scoped>
h1 {
background-color: chartreuse;
}
</style>
App.vue
<template>
<div id="app">
<div class="routing">
</div>
<router-link to="/">Login</router-link>
<router-link to="/home">Home</router-link>
<router-view v-if="$route = 'login'"></router-view>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
Main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Login from './Login.vue'
import Home from './Home.vue'
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Login},
{ path: '/home', component: Home},
];
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({
el: '#app',
router,
render: h => h(App)
});
Home.vue
<template>
<div>
<h1>Home</h1>
<hr>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style scoped>
h1 {
background-color: aquamarine;
}
</style>
I just had the same problem and found 2 approaches:
1. Using nested routes - http://router.vuejs.org/en/essentials/nested-routes.html
Basically you have to use your App.vue as kind of a placeholder, with all the elements that are shared between all the pages (in your case I believe that is none), and place <router-view></router-view> inside it. For you I believe that will be as simples as:
//App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
And you also will have to have another template that will hold your menu:
//Restricted.vue
<template>
<div id="restricted">
<div class="routing">
</div>
<router-link to="/">Login</router-link>
<router-link to="/home">Home</router-link>
<router-view></router-view>
</div>
</template>
And in your router should have something like:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Login from './Login.vue'
import Home from './Home.vue'
import Restricted from '/.Restricted.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Login},
{
path: '/restricted',
component: Restricted,
children: [
{ path: 'home', component: Home},
],
},
];
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({
el: '#app',
router,
render: h => h(App)
});
This way your Login page will be rendered at / and other pages (with menu) at /restricted/{other_page}. Using this approach the menu will not be displayed nor rendered.
2. Using v-if on the components that you do not want to render.
In you App.vue use v-if="this.$route.path !== '/'" on the elements that you do not want to be rendered, in your case, the router-link's. You could encapsulate them and apply v-if="this.$route.path !== '/'" to the encapsulation element (div?)
//App.vue
<template>
<div id="app">
<div class="routing" v-if="this.$route.path !== '/'">
<router-link to="/">Login</router-link>
<router-link to="/home">Home</router-link>
</div>
<router-view></router-view>
</div>
</template>
Regards.
You can use v-if for this:
<router-link v-if="!isOnLoginPage()" to="/">Login</router-link>
where isOnLoginPage can be a simple method, which returns true or false depending on current route.
isOnLoginPage: function() {
return this.$route.path === '/'
}
if your login path is '/login'
in your App.vue
<template>
<div id="app">
<div class="routing">
</div>
<router-link to="/" v-if="$route.fullPath !== '/login'">Login</router-link>
<router-link to="/home" v-if="$route.fullPath !== '/login'">Home</router-link>
<router-view v-if="$route.fullPath === '/login'"></router-view>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>