无法让 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 页面或这个 example 的 copy/paste:

// 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 在没有客户端的情况下工作

Unable to get vuejs2 and vue-router to work without on client

javascript

vue-router

vuejs2