在 Vue 2 项目中实现路由器

Question

我正在将我的 Vue 项目从 V3 转换为 V2 以更好地利用 BootStrap。我已经开始复制我的文件，但我运行遇到了一些错误。最近，eslint 告诉我 'app' 未使用。我试过忽略此错误，但由于网页未加载而没有奏效。我怀疑这里可能会发生更多事情。这是我的路由器发生错误的地方：

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` 选项

我怀疑问题之一是您使用 template 选项而不使用 runtime compiler enabled in your project (and you should see a warning in the browser's console log). However, you don't really need the template here, and you could use the render option：

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

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

作文API

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

安装@vue/composition-api插件：
```
npm install -S @vue/composition-api
```

在main.js中，设置插件：

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

更新所有 Composition API 引用以从 @vue/composition-api:

导入

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

demo

在 Vue 2 项目中实现路由器

Implementing a router in Vue 2 project

routes

http

vue.js

vue-router

vuejs2

未使用的变量

`template` 选项

作文API

在 Vue 2 项目中实现路由器

Implementing a router in Vue 2 project

routes

http

vue.js

vue-router

vuejs2

未使用的变量

template 选项

作文API

`template` 选项