index.js
import { createWebHistory, createRouter } from "vue-router";
import Home from "#/views/Home.vue";
import About from "#/views/About.vue";
import Blog from "#/views/Blog.vue";
import Services from "#/views/Services.vue";
import Contact from "#/views/Contact.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
{
path: "/services",
name: "Services",
component: Services,
},
{
path: "/blog",
name: "Blog",
component: Blog,
},
{
path: "/contact",
name: "Contact",
component: Contact,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
app.vue
<template>
<div id="nav">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/services">Services</router-link>
<router-link to="/contact">Contact</router-link>
<router-link to="/blog">Blog</router-link>
</div>
<router-view />
</template>
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
My codes are in here. There is no change when i press about,services etc.
What am i wrong there, i couldn't find.
when i write on the browser like localhost:8081/about its not working. It goes to localhost:8081
What is the problem, if you help me i will be glad. Thank you
Related
Production build looses something.
I have Vue 3.2.33 project; vite: 2.9.5
When running dev-server all the template renders fine:
App.vue:
<template>
<div id="menu">
<nav class="navbar">
<router-link class="navbar__link" to="/">{{ state.reg }}</router-link>
<router-link class="navbar__link" to="/Information">{{
state.info
}}</router-link>
<router-link class="navbar__link" to="/Subscribers">{{
state.subs
}}</router-link>
</nav>
<LocaleSwitcher />
</div>
<router-view></router-view>
</template>
router config file
import { createRouter, createWebHistory } from "vue-router";
import Information from "#/views/Information.vue";
import Search from "#/views/Search.vue";
import Subscribers from "#/views/Subscribers.vue";
import { useStore } from '#/stores/store'
const routes = [
{
path: "/",
name: "Search",
component: Search,
},
{
path: "/information",
name: "Information",
component: Information,
},
{
path: "/subscribers",
name: "Subscribers",
component: Subscribers,
},
];
const router = createRouter({
history: createWebHistory(),
routes
});
router.beforeEach((to) => {
const store = useStore()
if (!store.hasGroup && to.path !== '/') {
return '/'
}
})
export default router;
vite.config.ts
import { fileURLToPath, URL } from "url";
import vueI18n from "#intlify/vite-plugin-vue-i18n";
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import path from "path";
export default defineConfig({
plugins: [
vue(),
vueI18n({
include: path.resolve(__dirname, "./src/locales/**"),
}),
],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
}
});
but if I run build for production and run preview server, none of router components(router-link and router-view) render. Reading vite and vue-router documentation does not clarify anything yet. I would be grateful for any help, given that I am often just inattentive
So I deploy this app in my server using sub directories like MyServer.com/vue/.
Inside my App.vue only show <router-view />, on local this application runs smoothly, and there is no error on console.
App.vue:
<template>
<router-view/>
</template>
<script>
export default { };
</script>
<style></style>
route.js:
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{
path: "/",
name: "Home",
component: () => import("../views/Home.vue"),
redirect: "/dashboard",
children: [
// Children routes
],
},
{
path: "/login",
name: "Login",
component: () => import("../views/Login.vue"),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
mode: 'hash',
});
export default router;
main.js:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./route";
import ElementPlus from "element-plus";
import { Chart, registerables } from "chart.js";
import "element-plus/dist/index.css";
import "./styles/index.scss";
const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.use(Chart.register(...registerables));
app.mount("#app");
When I open any url I see always UsersList.vue component. Why? Because I include it in App.vue? If I changed it to <router-view/> I always see empty page. How can I fix it? And how can I make jump from ListView to DetailView through router-link
index.js
import Vue from 'vue'
import Router from 'vue-router'
import UsersList from '#/components/UsersList'
import UserDetail from '#/components/UserDetail'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/users/',
name: 'UsersList',
component: UsersList
},
{
path: '/user/:id',
name: 'user_detail',
component: UserDetail
}
]
})
main.js
Vue.use(VueResource)
Vue.use(VueAxios)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
UsersList.vue
<template>
<div>
<tr v-for="user in usersList" :key="user.id">
<td><router-link :to="{name:'user_detail',params:{id:user.id}}">{{ user.id }}</router-link></td>
</tr>
</div>
</template>
<script>
export default {
name: 'UsersList',
data() {
return {
usersList: []
};
},
mounted() {
this.$axios
.get('http://127.0.0.1:8000/api/v1/users/')
.then(response => (
this.usersList = response.data.results
));
}
}
You must import your components (UserList and UserDetail) in your router configuration file (index.js).
After that you'll be able to use <router-view>
What is the url you intent to access ?
you must add a base in your Router :
export default new Router({
mode: 'history',
base:'/users',
routes: [
{
path: '/users/',
name: 'UsersList',
component: UsersList
},
{
path: '/user/:id',
name: 'user_detail',
component: UserDetail
}
]
})
I am trying to push from one component to another using vue routes but am having issues!
This is my router->index.js:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/pages/HelloWorld'
import GroupStart from '#/pages/GroupStart'
import NotFound from '#/pages/NotFound'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/groupstart',
name: 'GroupStart',
component: GroupStart
},
{
path: '*',
name: 'Notfound',
component: NotFound
}
],
mode: 'history'
})
Now, from my helloworld component I am trying to do this:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'This is the startpage'
}
}
}
this.$router.push({ path: '/groupstart' })
</script>
When doing so I get this error:
Uncaught TypeError: Cannot read property 'push' of undefined
at eval (HelloWorld.vue?18db:17)
Not sure what I am doing wrong and hoping for help :-)
Thanks in advance.
you need to write this this.$router.push({ path: '/groupstart' }) inside some hook or method. if you want to do it right away when page is loaded, you can do something like this
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'This is the startpage'
}
},
mounted () {
this.$router.push({ path: '/groupstart' })
}
}
</script>
I have this page I want to try out Vue Router with Vue Components. I cant figure out whats wrong. I am getting an error Uncaught TypeError: Cannot read property 'name' of undefined at this line const App = new Vue.extend({})
<body>
<div id="app">
<router-view></router-view>
</div>
<template id="foo"> <h1>This is homepage</h1> </template>
<template id="bar"> <h1>This is Bar page</h1> </template>
</body>
//Vue.js v1.0.28
<script src="{{ asset( 'js/vue.js' ) }}"></script>
// vue-router v0.7.13
<script src="{{ asset( 'js/vue-router.js' ) }}"></script>
<script>
const router = new VueRouter()
const App = new Vue.extend({})
router.map({
'/': {
component: {
template: '#foo'
}
},
'/bar': {
component: {
template: '#bar'
}
},
})
router.start(App, '#app')
</script>
</html>
What am I doing wrong?
EDIT:
Okay, I have managed to get this working.
const Foo = Vue.component('foo', { template: '#foo' });
const Bar = Vue.component('bar', { template: '#bar' });
Vue.use(VueRouter)
const router = new VueRouter()
router.map({
'/foo': {
component: Foo
},
'/bar': {
component: Bar
},
})
var App = Vue.extend({})
router.start(App, 'body')
What I need now is to extract those templates from index.blade.php into their own files like Foo.vue and Bar.vue. How do I do that?
I am using Webpack to compile assets.
You could try to use vue-router v.v2.2.1 and you can check this official example https://github.com/vuejs/vue-hackernews-2.0 and here router code:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import { createListView } from '../views/CreateListView'
import ItemView from '../views/ItemView.vue'
import UserView from '../views/UserView.vue'
export default new Router({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: [
{ path: '/top/:page(\\d+)?', component: createListView('top') },
{ path: '/new/:page(\\d+)?', component: createListView('new') },
{ path: '/show/:page(\\d+)?', component: createListView('show') },
{ path: '/ask/:page(\\d+)?', component: createListView('ask') },
{ path: '/job/:page(\\d+)?', component: createListView('job') },
{ path: '/item/:id(\\d+)', component: ItemView },
{ path: '/user/:id', component: UserView },
{ path: '/', redirect: '/top' }
]
})