vue.js - Can't change router component -
i have .vue file following
<template> <div class="container"> <div class="row"> <div class="column"> <h2>create mia</h2> <p><img src="../../static/intro.gif"/></p> <p><a v-on:click="go()" href="javascript:void(0)" class="button">enter</a></p> </div> </div> </div> </template> <script> export default { methods: { go: function () { console.log(this.$router.go) this.$router.go({ path: '/app' }) } } } </script>
and in main index.html file have
<main class="container center"> <div id="logo"></div> <div id="section"> <router-view></router-view> </div> </main>
and in main.js
import vue 'vue' import resource 'vue-resource' import router 'vue-router' import app './components/app' import intro './components/intro' vue.use(resource) vue.use(router) const route = new router({hashbang: false, history: true, linkactiveclass: 'active', mode: 'html5'}) // pointing routes components should use route.map({ '/': { component: intro, subroutes: { 'app': { component: app } } }, '/app': { component: app } }) // invalid route redirect home route.redirect({ '*': '/app' }) route.start(intro, '#section')
when stuff compiled able intro
component click on button changes hash not component....
based on documentation thing i'm doing different changing route programmatically.
what doing wrong here?
Comments
Post a Comment