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

相关推荐
froginwe112 分钟前
Pandas DataFrame:深入理解数据分析的利器
开发语言
云枫晖5 分钟前
Webpack系列-编译过程
前端·webpack
Jm_洋洋5 分钟前
【Linux系统编程】程序替换:execve(execl、execlp、execle、execv、execvp、execvpe)
linux·运维·c语言·开发语言·程序人生
AskHarries14 分钟前
Toolhub — 一个干净实用的在线工具集合
前端·后端
冯诺依曼的锦鲤27 分钟前
算法练习:前缀和专题
开发语言·c++·算法
H尗29 分钟前
Vue3响应式系统的精妙设计:深入理解 depsLength 与 trackId 的协同艺术
前端·vue.js
昔人'37 分钟前
html`contenteditable`
前端·html
爱宇阳42 分钟前
npm 常用标签与使用技巧新手教程
前端·npm·node.js
郑板桥3042 分钟前
TypeScript:npm的types、typings、@type的区别
javascript·typescript·npm
JinSoooo1 小时前
pnpm monorepo 联调:告别 --global 参数
开发语言·javascript·ecmascript·pnpm