router-view路由出口

这边文章主要讲router-view搭建后台管理系统的一个基本模板

一.创建自己的路由规则

1.新建文件夹src/router/index.js

复制代码
npm i vue-router@3.6.5

2.配置好文件

复制代码
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

// 1.创建路由组件
//2.将路由与组件进行映射
const routes = [
  {
    path: "/",
    component: Main,
    redirect: "/home",
    children: [
      //   子路由
      { path: "/home", component: Home }, //首页
      { path: "/user", component: User }, //用户管理
      { path: "/mall", component: Mall }, //商品管理
      { path: "/page1", component: PageOne }, //页面1
      { path: "/page2", component: pageTwo }, //页面2
    ],
  },
  {
    path: "/login",
    component: Login,
  },
];
const router = new VueRouter({
  routes,   
});
// 将router实例对外进行暴露
export default router;

3.在main.js文件中引入并挂载

复制代码
import Vue from 'vue'
import App from './App.vue'
import router from "./router";

Vue.config.productionTip = false

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

4.一级路由存放的位置

5.引入element-ui

1.下载

复制代码
npm i element-ui

2.引入

复制代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

6.二级路由的配置

二级路由出口的存放位置:

通过children配置好对应的路由。

7.总结

通过这个案例可以很明显的知道router-view路由出口是怎么一回事

相关推荐
gnip1 天前
vite中自动根据约定目录生成路由配置
前端·javascript
两只程序猿1 天前
数据可视化 | Violin Plot小提琴图Python实现 数据分布密度可视化科研图表
开发语言·python·信息可视化
野生技术架构师1 天前
1000 道 Java 架构师岗面试题
java·开发语言
湫兮之风1 天前
C++: Lambda表达式详解(从入门到深入)
开发语言·c++
Porunarufu1 天前
JAVA·顺序逻辑控制
java·开发语言
前端橙一陈1 天前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
Sylvia-girl1 天前
C语言中经常使用的函数
c语言·开发语言
~无忧花开~1 天前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
周杰伦fans1 天前
C# 23种设计模式详解与示例
开发语言·设计模式·c#
泰迪智能科技011 天前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts