无法获取vuejs2和VUE路由器没有工作在客户端

问题描述：

我，包括我的网页vuejs和VUE路由器，并创建了一个app.js初始化路由器和VUE，但是路由不工作，我甚至不看到里面定义为<router-link to="/foo"> foo </router-link>无法获取vuejs2和VUE路由器没有工作在客户端

的联系，这是代码的简化版本

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="../build/js/vue.min.js"></script> 
    <script src="../build/js/vue-router.min.js"></script> 
    <script src="../build/js/app.js"></script> 
</head> 
<body id="app"> 

<div class='nav'> 
    <router-link to="/foo">foo</router-link> 
    <router-link to="/bar">bar</router-link> 
    <router-link to="/tar">tar</router-link> 
</div> 


<div class="content"> 
     <router-view></router-view> 
</div> 

</body> 
</html>

我app.js距离这VUE路由器页面的复制/粘贴或本example：

// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter and then call `Vue.use(VueRouter)`. 

// 1. Define route components. 
// These can be imported from other files 
const Foo = { template: '<div>foo</div>' } 
const Bar = { template: '<div>bar</div>' } 

// 2. Define some routes 
// Each route should map to a component. The "component" can 
// either be an actual component constructor created via 
// `Vue.extend()`, or just a component options object. 
// We'll talk about nested routes later. 
const routes = [ 
    { path: '/foo', component: Foo }, 
    { path: '/bar', component: Bar } 
] 

// 3. Create the router instance and pass the `routes` option 
// You can pass in additional options here, but let's 
// keep it simple for now. 
const router = new VueRouter({ 
    routes // short for `routes: routes` 
}) 

// 4. Create and mount the root instance. 
// Make sure to inject the router with the router option to make the 
// whole app router-aware. 
const app = new Vue({ 
    router: router 
}).$mount('#app')

出于某种原因，我不能看到所有的链接。我在控制台中看到没有错误。所有文件都正确包含在页面中。

答

你Vue脚本包括应该来右边的结束标记之前，不会在头部区域。

<body> 
    <div id="app"> 
     <!-- Your Vue Components Here --> 
    </div> 

    <!-- Vue Scripts Here --> 
    <script src="../build/js/vue.min.js"></script> 
    <script src="../build/js/vue-router.min.js"></script> 
    <script src="../build/js/app.js"></script> 
</body>

仍然没有工作，这里是一个转储我的index.html的... https：//开头引擎收录.COM/tuGUNYgP – hidar

你vue.js脚本包括要来的结束标记结束前右 – Webber

现在，我得到错误“模板应该负责的状态映射到用户界面。避免将标签与副作用你模板，如

答

我认为它可能应用程序ID应该在div标记检查您的脚本链接。

我试着codepen和它的工作，如果你想看看它

<div id="app"> 
    <div class='nav'> 
    <router-link to="/foo">foo</router-link> 
    <router-link to="/bar">bar</router-link> 
    <router-link to="/tar">tar</router-link> 
    </div> 


    <div class="content"> 
     <router-view></router-view> 
    </div> 
</div>

https://codepen.io/ResoGuy/pen/Jyzjxg

仍然没有工作里面，这里是我的index.html ... https://pastebin.com/tuGUNYgP转储 – hidar

无法获取vuejs2和VUE路由器没有工作在客户端

相关推荐