Answer the question
In order to leave comments, you need to log in
How to set up routing in Vue.js 2?
"vue": "^2.6.10",
"vue-router": "^3.0.3",
<template>
<div class="home">
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
//import ColorDirective from './color'
import Router from 'vue-router'
import home from '@/components/home'
Vue.directive('colored', ColorDirective)
Vue.config.productionTip = false
('#app')
new Vue({
router,
store,
render: h => h(App)
}).$mount
import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import Cars from './components/Cars.vue'
import About from './components/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
},
{
path: '/about',
name: 'about',
component: about
},
{
path: '/cars',
name: 'cars',
component: cars
}
]
})
<template>
<div id="app">
<div id="nav">
<router-link to="/">home Vue</router-link> |
<router-link to="/about">About</router-link>|
<router-link to="/cars">Cars</router-link>
</div>
<router-view/>
</div>
</template>
<!--
<template>
<div id="app">
<router-view/>
</div>
</template>-->
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
}
</style>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question