在 Vue 2 项目中实现路由器

Question

我正在将我的 Vue 项目从 V3 转换为 V2，以便更好地使用 BootStrap。我已经开始复制我的文件，但我遇到了一些错误。最近，eslint 告诉我“应用程序”未使用。我尝试忽略此错误，但由于网页未加载，因此无法正常工作。我怀疑这里可能会发生更多事情。这是我发生错误的路由器：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Home from './views/Home.vue'
import MovieDetail from './views/MovieDetail.vue'
import ReviewMovie from './views/ReviewMovie.vue'

Vue.use(VueRouter)

const routes = [
    { path: '/', component: Home },
    { path: '/movie/:id', component: MovieDetail },
    { path: '/movie/:id/review', component: ReviewMovie}
]

const router = new VueRouter({
    routes
})

const app = new Vue({
  router,
  template: '<App />',
  components: {
      App
  }
}).$mount('#app')

这是我的主要应用：

<template>
  <div id="app">
  <header>
    <router-link to="/">
    <h1><span>Horror</span>Hub</h1> 
    </router-link>
  
  </header>
  <body>
      <router-view />
  </body>
  </div>
</template>
<script>
    export default {
    }

</script>

Answer 1

未使用的变量

由于没有使用app，您可以将其删除以解决 ESLint 警告：

// const app = new Vue(/*...*/).$mount('#app')
   ^^^^^^^^^
new Vue(/*...*/).$mount('#app')

但这不是页面未呈现的原因。

template 选项

我怀疑其中一个问题是您在项目中未启用runtime compiler 的情况下使用template 选项（您应该在浏览器的控制台日志中看到警告）。但是，您实际上并不需要 template，您可以使用 render option 代替：

new Vue({
  /*
  template: '<App />',
  components: {
      App
  },
  */

  render: h => h(App),
}).$mount('#app')

组合 API

您的组件正在使用 Composition API，这需要 Vue 2 中的插件：

1. 安装@vue/composition-api插件：

   npm install -S @vue/composition-api
   

2. 在main.js，设置插件：

   import VueCompositionApi from '@vue/composition-api'
   Vue.use(VueCompositionApi)
   

3. 更新所有 Composition API 引用以从 @vue/composition-api 导入：

   // import { ref, onBeforeMount } from 'vue'
   import { ref, onBeforeMount } from '@vue/composition-api'
   

demo