无法在客户端上运行vuejs2和vue-router

Question

我在页面中包含了vuejs和vue路由器，并创建了一个app.js来初始化路由器和vue，但是路由无法正常工作，我什至看不到内部定义为<router-link to="/foo"> foo </router-link>

这是代码的简化版本

<!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-router页面或此示例的复制/粘贴：

// 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')

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

Answer 1

您的Vue脚本包含的内容应恰好在结束body标签之前，而不是在头部区域。

<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>

Answer 2

我认为可能是应用程序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

无法在客户端上运行vuejs2和vue-router

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-09-03 00:40:44

解决方案2
1 2017-09-03 00:49:08

无法在客户端上运行vuejs2和vue-router

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-09-03 00:40:44

解决方案2 1 2017-09-03 00:49:08

解决方案1
1 已采纳 2017-09-03 00:40:44

解决方案2
1 2017-09-03 00:49:08