提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
- 理解:一个路由(route)就是一组映射冠以(key-value),多个路由需要路由器(router)进行管理
- 前端路由:key是路径,value是组件
基本使用
1、路由配置index.js
import Vue from "vue";
import VueRouter from "vue-router";
// 使用插件,。因为VueRouter是一个插件,插件都是要use的
Vue.use(VueRouter);
// 引入路由组件
import Home from "@/pages/Home";
export default new VueRouter({
// 配置路由
routes: [
{
path: "/home", //这里要有逗号,不然报错
component: Home,
meta: { show: true },
},
{
// params参数要占位
path: "/search/:keyword?",
component: Search,
meta: { show: true },
// 使用对象传参需要给路由组件命名
name: "search",
},
// 重定向,项目跑起来的时候,访问/直接到首页
{ path: "/", redirect: "/home" },
],
});
2、main.js配置
import Vue from "vue";
import App from "./App.vue";
//引入路由
import router from "@/router";
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
// 注册路由
router,
}).$mount("#app");
3、App.vue指定路由指定展示位置
<template>
<div>
<Header> </Header>
<!-- 路由的出口位置 -->
<router-view></router-view>
<Footer v-show="$route.meta.show"></Footer>
</div>
</template>
<script>
import Header from "./components/Header";
import Footer from "./components/Footer";
export default {
components: {
Header,
Footer,
},
};