步骤
新建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.
- 检查router.js 是否有引入vue (一般会报错:error 'Vue' is not defined no-undef)
- vue-router是否安装成功,并引入(一般会报错: error 'VueRouter' is not defined no-undef)
- main.js是否导入router
Vue router : TypeError: Cannot read property '$createElement' of undefined
编译器提示导致在写路由分配表的时候component的时候多写了一个s
去掉s