When I am using another template (Header.vue) inside the main template Index.vue, it throws an error "$scrollTo" is not defined.
Note : $scrollTo is provided by the module "vue2-scrollspy" which I have installed.
However if I paste the entire code of Header.vue inside Index.vue it works fine.
Index.vue
<template>
<div class="scroll-div">
<mainheader></mainheader>
</div>
</template>
<script>
import mainheader from './Header.vue'
export default {
name: 'MyApplication',
components:{
mainheader
}
}
</script>
Header.vue
<template>
<div class="main-Header">
<b-navbar toggleable="md" type="dark" variant="dark" fixed="top">
<div class="container">
<b-navbar-brand #click="$scrollTo(0)"></b-navbar-brand>
</div>
</b-navbar>
</div>
</template>
<script>
export default {
name : 'mainheader',
data () {
return {
msg: 'Welcome to SportsBee',
scrollPos: 0
}
}
}
</script>
index.js
import Scrollspy from 'vue2-scrollspy';
Vue.use(Scrollspy);
Vue.use(VueAxios, axios);
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'index',
component: index
}
], mode:"history"
})
export default router;
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
Related
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
Im new to Vue JS and I'm making a simple page in Vue JS. Here are my codes:
main.js
import Vue from 'vue'
import App from './App.vue'
import PokeProfile from './components/PokeProfile.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
Vue.use(ElementUI)
const router = new VueRouter({
routes: [
{path: '/', component: App},
{path: '/pokemon/:id', component: PokeProfile},
],
mode: 'history'
})
//Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App),
router: router
})
App.js
<template>
<div id="app">
<div class="tag-group">
<el-tag
v-for="pokemon in pokemons"
:key="pokemon.national_id"
:type="pokemon.name"
effect="plain">
<poke-item :pokemon=pokemon></poke-item>
</el-tag>
</div>
</div>
</template>
<script>
import PokeItem from './components/PokeItem.vue'
import axios from 'axios'
export default {
name: 'app',
components: {
PokeItem
},
data() {
return {
pokemons: []
}
},
created() {
axios.get("http://localhost:3000")
.then(res => this.pokemons = res.data)
.catch(err => {console.log(err)})
}
}
</script>
<style>
div {
display: flex;
justify-content: center;
}
</style>
PokeItem.js
<template>
<div>
<router-link :to="pokemonLink">
{{pokemon.name}}
</router-link>
</div>
</template>
<script>
export default {
data() {
return {}
},
props: {
pokemon: {
type: Object,
required: true
}
},
computed: {
pokemonLink() {
return `/pokemon/${this.pokemon.national_id}`
}
}
}
</script>
PokeProfile.js
<template>
<h1>Hello Pokemon</h1>
</template>
<script>
export default {
}
</script>
The problem here is I can not move to PokeProfile.js when I click on an item in the PokeItem.js file. What could be the problem? I've checked the section of the code related to routing but I didn't see any problem.
Vue-Router uses a dynamic component (<router-view>) to render the components of your routes. Usually you will find this component in the template of your app.vue. Since you have no <router-view> component Vue-Router does not know where to render your route components.
Try this:
// main.js
import Home from './components/Home.vue'
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/pokemon/:id', component: PokeProfile},
],
mode: 'history'
})
// components/Home.vue
// your old App.vue
// ./App.vue
<template>
<main>
<router-view></router-view>
</main>
</template>
I am a newer for vue,now i there is a simple use about vue.
<template>
<div>
.......
</div>
</template>
<script>
export default {
data(){
.......
}
}
</script>
<template>
<div>
.......
</div>
</template>
<script>
export default{
data(){
....
}
}
</script>
the above is two components.
the following is my App.vue and router:
import Vue from "vue";
import VueRouter from "vue-router";
import home from "#/components/home.vue";
import about from "#/components/about.vue";
Vue.use(VueRouter);
export default new Router({
routes : [
{
path:"./home",
component:home
},
{
path:"./about",
component:about
},
]
})
<template>
<div id = "app">
<img src="./assets/logo.png">
<header>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</header>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: ""
}
</script>
this is my main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
But there is nothing about my code?
What's wrong with my code?Is there wrong about my router? How to solver it? I have confused it for a long time.Anyone can help me?
Try changing the route path from ./home to /home
routes : [
{
path:"/home",
component: home
},
{
path:"/about",
component: about
},
]
UPDATE:
It magically starts to work later on after I clear browser cache, I do not know what happened before.
I wonder how to include router-view in a component rather than directly use it?
For Example:
main.js
import Vue from 'vue'
import router from "./router"
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App),
router
})
App.vue
<template>
<div>
<page-content></page-content>
</div>
</template>
<script>
import pageContent from "./page-content.vue";
export default {
name: 'app',
data() { return {}; },
components: {
"page-content": pageContent
}
}
</script>
page-content.vue
<template>
<div class="page-content">
<router-view>
</router-view>
</div>
</template>
<script>
export default {
}
</script>
router.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [{ path: '/', component: Foo }]
export default new VueRouter({
routes
})
The problem is I can not see foo shown up on page
Ok so I started a basic VueJS with the VueCli.
This is my setup:
App.vue
<template>
<div id="app">
<router-link to="/home"><span>Home</span></router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
Home.vue
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name: 'home',
data () {
return {
msg: 'HomeView'
}
}
}
</script>
index.js from the router:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/pages/Home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/home',
name: 'Home',
component: Home
}
]
})
main.js:
import Vue from 'vue'
import App from './App'
import NavigationBar from './components/NavigationBar'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: {App}
})
new Vue({
el: '#navigation-bar',
template: '<NavigationBar/>',
components: {NavigationBar}
})
This works perfectly fine. The routerlink works and display the Home.vue.
However I created a NavigationBar Component:
NavigationBar.vue
<template>
<div><span>Test</span>
<router-link to="/home"><span>Home</span></router-link></div>
</template>
<script>
export default {
name: 'navigationBar',
data () {
return {
}
}
}
</script>
When I now delete the router-link in the App.vue and add the navigation-bar ID I cant see the router-link. But the NavigationBar gets loaded, because I see the Test Span:
App.vue
<template>
<div id="app">
<div id="navigation-bar"></div>
<router-view></router-view>
</div>
</template>
Why doesnt it work? The router-link is just inside a template and I get no error message.