when I use browser go to http://localhost:8080/samuifight it change url to http://localhost:8080/SamuiFight I expect it show "Hi SamuiFight" but it show "Hello app.vue "
main.js
import App from "./App.vue";
import { createRouter, createWebHistory } from 'vue-router';
import SamuiFight from './components/boxing/SamuiFight.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/samuifight', component: SamuiFight } // our-domain.com/teams => TeamsList
]
});
const app = createApp(App)
app.use(router);
app.mount('#app'); ```
App.vue
``` <template>
<h3>Hello app.vue</h3>
</template>
SamuiFight.vue
<h3>Hi SamuiFight</h3>
</template>
you need to put router view then vue-router will inject the component there according to the active route.
<template>
<h3>Hello app.vue</h3>
<router-view></router-view>
</template>
Related
I want to route HomeView.vue view to App.vue and this is my code.
...............................................................
Main.js
import Vue from 'vue'
import router from './router/index'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
vuetify,
router,
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<router-view />
</template>
<script setup></script>
<style lang="scss"></style>
HomeView.vue
<template>
<p>Home</p>
</template>
<script>
export default {}
</script>
<style lang=""></style>
Router/indes.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView,
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
I tride use ".$use(router)" before .$mount(#app)
Someone can help?
I made a Vue 2 web page and tried to use vue-router v3 to route to a different page. The web page is as follows:
src/App.vue: the web page opens from here
<template>
<div id="app">
<GoHere/>
</div>
</template>
<script>
import GoHere from './views/gohere/GoHere.vue'
export default {
name: 'App',
components: {
GoHere
}
}
</script>
src/main.js:
import Vue from 'vue'
import App from './App.vue'
import router from "./router/router"
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
src/views/gohere/GoHere.vue: the page from which the issue arises
<template>
<div>
<v-btn #click="goHere()">
Go Here
</v-btn>
</div>
</template>
<script>
export default {
name: "GoHere",
methods: {
goHere() {
this.$router.push("/menu")
}
}
}
</script>
src/views/menu/Menu.vue: the page to redirect to
<template>
<div>
Menu
</div>
</template>
<script>
export default {
name: "Menu",
}
</script>
src/router/router.js: the router file
import Vue from 'vue'
import VueRouter from 'vue-router'
import GoHere from '../views/gohere/GoHere'
import Menu from '../views/menu/Menu'
Vue.use(VueRouter)
const routes = [
{ path: '/', name: "gohere", component: GoHere},
{ path: '/menu', name: "menu", component: Menu}
]
const router = new VueRouter({
routes
})
export default router
When I clicked on the button in GoHere.vue, the URL changes into "http://localhost:8080/#/menu" but the content does not change into the content for Menu.vue. How can the problem be solved?
The component from the current route will automatically render in <router-view></router-view>
App.vue:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
Check the docs
The program content is shown in the figure. The routing configuration file is in the index.js file in the route. As a result, the URL has changed, but the page has always been consistent with the root page. I tried many methods, and it took an afternoon to solve it.
I'm a beginner. I hope you don't laugh at me and can help me solve my problems. Thank you
app.vue:
<template>
<div id="app">
root组件
<router-link to="/login"> to login</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>
login.vue
<template>
<div>
login组件
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
</style>
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '../components/login.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/login' , compoment: login}
]
const router = new VueRouter ({
routes
})
export default router
main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import './plugins/element.js'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
File structure:
enter image description here
You misspelled word component in file outer/index.js.
Should be { path: '/login' , component: login}
Experimenting with vue-router, when i click on <router-link to="/about">Go to About</router-link> it doesnt redirect me to anywhere so for example: if i was on localhost:8080/#/ and i click the Go to About button, i still remain on localhost:8080/#/. Also if i change the url directly to localhost:8080/#/about nothing happens (ie no change to the website as if i am still on localhost:8080/#/)
The code:
/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/about',
component: () => {
import ('../views/About.vue');
}
}
]
const router = new VueRouter({
routes
})
export default router;
./App.vue
<template>
<div>
<div id='nav'>
<router-link to="/about">Go to Foo</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
//
},
data: () => ({
//
}),
};
</script>
./views/About.vue
<template>
<p>Testing out vue-routes</p>
</template>
./main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import store from './store';
import router from './router';
Vue.config.productionTip = false;
new Vue({
vuetify,
store,
router,
render: h => h(App)
}).$mount('#app')
I tried running the following code. it gave no error on serving. (I am also using vuetify and vuex but i dont think that is the problem?)
EDIT
I have edited the code such that it works by creating another vue app and using the default that vue has provided with but i cant seem to understand why the edited code works and why the previous code ^^ above didnt. It seems like the reason was that the default localhost:8080/#/ needs to have its own route in ./App.vue as well and is not there by default? can someone confirm this (can't seem to find something like this explanation online?)
Revised working code:
./App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
./views/Home.vue
<template>
<h1>This is the home page</h1>
</template>
<script>
export default {
name: 'Home',
components: {
//
},
data: () => ({
//
}),
};
</script>
./main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import store from './store';
import router from './router';
Vue.config.productionTip = false;
new Vue({
vuetify,
store,
router,
render: h => h(App)
}).$mount('#app')
./router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router';
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
component: () =>
import("../views/About.vue")
}
];
const router = new VueRouter({
routes
})
export default router;
./views/About.vue
<template>
<p>Testing out vue-routes</p>
</template>
You need to have a <router-view/> where the routes are going to resolve.
You can read more about it here: documentation
I use a route-view inside my App.vue, in my routes I'm using the component Base, what I want is call a 'teste' component inside a 'Base' component.
I already read about nested-named-views in vue-router, but not resolved my problem.
Route.js
import Base from './components/base/Base.vue';
export const routes = [
{
path: '/',
components: {
default: Base
}
},
App.vue
<div id="app">
<router-view></router-view>
</div>
Base.vue
<template>
<teste></teste> //this component dosent render
</template>
<script>
import teste from './SideBar.vue'
export default {
name: 'Base',
components: {
teste
}
}
SideBar.vue
<template>
<p>teste</p>
</template>
<script>
export default {
name: 'teste'
}
Main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import {routes} from './routes'
Vue.use(VueRouter)
Vue.config.productionTip = false
const router = new VueRouter({
routes
});
new Vue({
render: h => h(App),
router
}).$mount('#app')