使用 vue-router 编写导航栏和遇到的问题

步骤

新建router.js

import Vue from "vue";
import VueRouter from "vue-router";
import Center from "./components/Center.vue";
import Share from "./components/Share.vue";

Vue.use(VueRouter);

const routes = [
  { path: "/center", component: Center },
  { path: "/share", component: Share },
];

const router = new VueRouter({
  routes,
  linkActiveClass: 'active', // 设置选中时候的样式
});

export default router;

在main.js中导入router

import Vue from "vue";
import App from "./App.vue";
import router from "./router.js";

Vue.config.productionTip = false;

new Vue({
  router, // 导入router
  render: (h) => h(App),
}).$mount("#app");

在需要展示的导航栏的页面写入路由

// 代码来着官方文档 https://router.vuejs.org/zh/guide/#html
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

出现的问题

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

1. 检查router.js 是否有引入vue （一般会报错：error  'Vue' is not defined  no-undef）
2. vue-router是否安装成功，并引入（一般会报错： error 'VueRouter' is not defined  no-undef）
3. main.js是否导入router

 Vue router : TypeError: Cannot read property '$createElement' of undefined

 编译器提示导致在写路由分配表的时候component的时候多写了一个s

去掉s