import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/views/Home.vue'
import Load from '#/views/Load.vue'
import Login from '#/views/Login.vue'
import Main from '#/views/Main.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: Home
},
{
path: '/load',
name: 'loading',
component: Load
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/main',
name: 'main',
component: Main
}]
})
I connected the router correctly.
But https://sh031224.github.io/portfolio/ the inside of '#app' is empty.
How can I do?
My github is https://github.com/Sh031224/portfolio
And github page is https://sh031224.github.io/portfolio/
You need to set base in your router configuration to "/portfolio/"
See the docs
Related
I am using the #nuxtjs/router module for defining custom routes. Here is my router.js file
import Vue from 'vue'
import Router from 'vue-router'
import News from '~/pages/News'
import Login from '~/pages/auth/Login'
import Signup from '~/pages/auth/Signup'
import Account from '~/pages/Account'
Vue.use(Router)
export function createRouter() {
return new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Index',
component: News,
},
{
path: '/news',
name: 'News',
component: News,
},
{
path: '/news/:tag',
name: 'TaggedNews',
component: News,
},
{
path: '/news/:id([a-f0-9]{32})/:title',
name: 'NewsItem',
component: News,
},
{
path: '/news/:tag/:id([a-f0-9]{32})/:title',
name: 'TaggedNewsItem',
component: News,
},
{
path: '/login',
component: Login,
},
{
path: '/signup',
component: Signup,
},
{
path: '/account',
component: Account,
},
],
})
}
I want to open the /login route as a modal on Desktop but page on mobile. How do I go about it?
Short answer would be you can't, as for using a modal you need to tell the app what "actual route" you are on - imagine navigating directly to /login on desktop and the issue becomes clear.
My suggestion would be to not add a route for login, but to use a query Param for whether or not the Login modal should be displayed:
query Param would be handled by a LoginModal component on the app root
closing/opening would both trigger and be managed by changes to the query parameter
On mobile, the modal can be styled as a full screen block.
Hello apologise for my question could be very dummy but i was not able to find correct answer in google. I dont have access to this.$router in Vue. From what i found it says vue inject router as dependecy to every component. But still my this.$route do not shows up. I'm using Vue version 3.2.1 and vue-router 3.0.1 (selected from CLI when project it's generated). Im alowed to navigate tho. Everything seems to be correctly just this dependency $router i dont have access to it.
I tryed to research in google everything but unsuccessfully. What i found it was only that which says vue inject router as dependency to every component still unsucesfull to find as property to my class $router. Everything else works good tho, i mean router link, router view just property to reach params or query or redirect is missing.
How did you initialize your vue-router module with Vue ?
It should be like this :
import Vue from 'vue'
import VueRouter from 'vue-router'
// Include plugin
Vue.use(VueRouter)
// Initialize your router
const vueRouter = new VueRouter({
routes: [] // your routes
})
// Send your router to your Vue top component
const app = new Vue({
el: '#my-app',
router: vueRouter,
render: h => h(App)
})
import Vue from 'vue';
import './plugins/vuetify'
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
And i have separate file with my routes:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Signin from './views/Users/Signin.vue';
import Signup from './views/Users/Signup.vue';
import Profile from './views/Users/Profile.vue';
import AddPlace from './views/WorldPlaces/AddPlace.vue';
import AllPlaces from './views/WorldPlaces/AllPlaces.vue';
import DetailsPlace from './views/WorldPlaces/DetailsPlace.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/signup',
name: 'signup',
component: Signup
},
{
path: '/signin',
name: 'signin',
component: Signin
},
{
path: '/profile',
name: 'profile',
component: Profile
},
{
path: '/places/add',
name: 'addplace',
component: AddPlace
},
{
path: '/places/all',
name: 'allplaces',
component: AllPlaces
},
{
path: '/places/details/:id',
name: 'detailsplace',
component: DetailsPlace
}
// {
// 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'),
// },
],
mode: 'history'
});
I initialized a project with the vue-cli,and I just configured the router.
why is always open the 'HelloWorld' component when I try to enter: 'http://localhost:8080/HelloWorld2' or 'http://localhost:8080/HelloWorld1'.
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import HelloWorld1 from '#/components/HelloWorld1'
import HelloWorld2 from '#/components/HelloWorld2'
import HelloWorld3 from '#/components/HelloWorld3'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/HelloWorld1',
component: HelloWorld1,
// childres:[
// {
// path: 'HelloWorld3',
// component: HelloWorld3,
// },
// ]
},
{
path: '/HelloWorld2',
component: HelloWorld2
}
]
})
The vue-router uses hash mode by default. In your configuration, you probably want to use html5 history mode. See https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations for reference.
This can be changed in your Router setup:
const router = new VueRouter({
mode: 'history',
routes: [...]
})
I'm working on a VueJs project and now structuring my router records. I've realized I could be having different components having same name. How do I import them and use them in the route records? How do I make their names unique when configuring the router?
import Vue from 'vue'
import Router from 'vue-router'
import AllUsers from '../components/Sales/AllUsers'
import AllUsers from '../components/Finance/AllUsers'
...
export default new Router({
routes: [
{
path: '/', name: 'home', component: Home
},
{
path: '/sales/users', name: 'sales-users', component: AllUsers
},
{
path: '/finance/users', name: 'finance-users', component: AllUsers
}
I have used a hypothetical example here (since I could as well call the components SalesUsers and FinanceUsers) but you will agree there are times when components will really have same name. How do I handle that, given that I need to specify the component for each route record?
PS: Slightly new to VueJS, so advice on improvements and best practices is welcome.
Since your exports are default you can choose any name during import:
import Vue from 'vue'
import Router from 'vue-router'
import AllSalesUsers from '../components/Sales/AllUsers'
import AllFinanceUsers from '../components/Finance/AllUsers'
// ...
export default new Router({
routes: [
{
path: '/', name: 'home', component: Home
},
{
path: '/sales/users', name: 'sales-users', component: AllSalesUsers
},
{
path: '/finance/users', name: 'finance-users', component: AllFinanceUsers
}
]
})
You can also import the components while defining the routes.
import Vue from 'vue'
import Router from 'vue-router'
...
export default new Router({
routes: [
{
path: '/', name: 'home', component: Home
},
{
path: '/sales/users',
name: 'sales-users',
component: ()=> import('../components/Sales/AllUsers')
},
{
path: '/finance/users',
name: 'finance-users',
component: ()=> import('../components/Finance/AllUsers')
}
If is not the default export you can use this:
import { AllSalesUsers } from '../components/Sales/AllUsers'
import { AllSalesUsers as AllFinanceUsers } from '../components/Finance/AllUsers'
please help me with this error on console
router.map is not function
I am using browserify and laravel5.3
here is my app.js code :
import Vue from 'vue/dist/vue.js';
var VueRouter = require('vue-router');
import App from '../components/App.vue';
import Dashboard from '../components/Dashboard.vue';
import Home from '../components/Home.vue';
import Register from '../components/Register.vue';
import Signin from '../components/Signin.vue';
Vue.use(VueRouter);
export var router = new VueRouter()
router.map({
'/': {
name: 'home',
component: require('../components/Home.vue')
},
'/register': {
name: 'register',
component: Register
}
})
router.start(App, '#app');
vue-router 2.0, like Vue 2.0 has significant changes from v1.
In this specific case, routes are now declared differently:
new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
https://router.vuejs.org/en/essentials/getting-started.html
I strongly encourage you read up on what has changed in both.