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路由出口是怎么一回事

相关推荐
wjs20242 小时前
状态模式(State Pattern)
开发语言
我命由我123452 小时前
Kotlin 数据容器 - List(List 概述、创建 List、List 核心特性、List 元素访问、List 遍历)
java·开发语言·jvm·windows·java-ee·kotlin·list
liulilittle2 小时前
C++ TAP(基于任务的异步编程模式)
服务器·开发语言·网络·c++·分布式·任务·tap
励志要当大牛的小白菜4 小时前
ART配对软件使用
开发语言·c++·qt·算法
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
爱装代码的小瓶子6 小时前
数据结构之队列(C语言)
c语言·开发语言·数据结构
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass