vue-VueRouter-后台管理案例

最新推荐文章于 2024-09-03 13:26:11 发布
最新推荐文章于 2024-09-03 13:26:11 发布
阅读量1.5k 收藏 14
点赞数 2
分类专栏： # vue 文章标签： vue VueRouter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaogzhen/article/details/107678179
版权
vue-VueRouter-后台管理案例
目录

文章目录



内容

1、UI界面

一般情况下，前端页面由UI做好页面（html+css)给我们，我们根据UI页面修改为Vue项目。

  • UI页面代码

      <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>10_router-backend-manager</title>
  	<script src="../../node_modules/vue/dist/vue.js"></script>
  	<style type="text/css">
  		html,
  		body,
  		#app {
  		  margin: 0;
  		  padding: 0px;
  		  height: 100%;
  		}
  		.header {
  		  height: 50px;
  		  background-color: #545c64;
  		  line-height: 50px;
  		  text-align: center;
  		  font-size: 24px;
  		  color: #fff;
  		}
  		.footer {
  		  height: 40px;
  		  line-height: 40px;
  		  background-color: #888;
  		  position: absolute;
  		  bottom: 0;
  		  width: 100%;
  		  text-align: center;
  		  color: #fff;
  		}
  		.main {
  		  display: flex;
  		  position: absolute;
  		  top: 50px;
  		  bottom: 40px;
  		  width: 100%;
  		}
  		.content {
  		  flex: 1;
  		  text-align: center;
  		  height: 100%;
  		}
  		.left {
  		  flex: 0 0 20%;
  		  background-color: #545c64;
  		}
  		.left a {
  		  color: white;
  		  text-decoration: none;
  		}
  		.right {
  		  margin: 5px;
  		}
  		.btns {
  		  width: 100%;
  		  height: 35px;
  		  line-height: 35px;
  		  background-color: #f5f5f5;
  		  text-align: left;
  		  padding-left: 10px;
  		  box-sizing: border-box;
  		}
  		button {
  		  height: 30px;
  		  background-color: #ecf5ff;
  		  border: 1px solid lightskyblue;
  		  font-size: 12px;
  		  padding: 0 20px;
  		}
  		.main-content {
  		  margin-top: 10px;
  		}
  		ul {
  		  margin: 0;
  		  padding: 0;
  		  list-style: none;
  		}
  		ul li {
  		  height: 45px;
  		  line-height: 45px;
  		  background-color: #a0a0a0;
  		  color: #fff;
  		  cursor: pointer;
  		  border-bottom: 1px solid #fff;
  		}

  		table {
  		  width: 100%;
  		  border-collapse: collapse;
  		}

  		td,
  		th {
  		  border: 1px solid #eee;
  		  line-height: 35px;
  		  font-size: 12px;
  		}

  		th {
  		  background-color: #ddd;
  		}
  	  </style>
  </head>
  <body>
  <div id="app">
  	<div>
  		<!-- 头部区域 -->
  		<header class="header">后台管理系统</header>
  		<!-- 中间主体区域 -->
  		<div class="main">
  		  <!-- 左侧菜单栏 -->
  		  <div class="content left">
  			<ul>
  			  <li><a href="#">用户管理</a></li>
  			  <li><a href="#">权限管理</a></li>
  			  <li><a href="#">商品管理</a></li>
  			  <li><a href="#">订单管理</a></li>
  			  <li><a href="#">系统设置</a></li>
  			</ul>
  		  </div>
  		  <!-- 右侧内容区域 -->
  		  <div class="content right">
  			<div class="main-content">
  			<!-- <router-view /> -->
  		  </div>
  		</div>
  		</div>
  		<!-- 尾部区域 -->
  		<footer class="footer">版权信息</footer>
  	</div>
  </div>

  <script>
  	const app = new Vue({
  		el: '#app'
  	 });
   </script>
  </body>
  </html>

  • 效果图示1-1：在这里插入图片描述

2、项目分析

根据项目的整体布局划分好组件结构，通过路由导航控制组件的显示。功能实现及步骤如下：

  1. 抽离并渲染App根组件
  2. 把左侧菜单改造为路由链接
  3. 创建左侧菜单对应的组件
  4. 右侧主体区域添加路由占位符
  5. 添加子路由规则
  6. 通过路由重定向默认渲染用户组件
  7. 渲染用户列表数据
  8. 编程式导航跳转到用户详细页
  9. 实现后退功能

3、项目改造

3.1、抽离并渲染App根组件

  • 代码3.1-1：

      <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>10_router-backend-manager</title>
  	<script src="../../node_modules/vue/dist/vue.js"></script>
  	<script src="../../node_modules/vue-router/dist/vue-router.js"></script>
  	<style type="text/css">
  		html,
  		body,
  		#app {
  		  margin: 0;
  		  padding: 0px;
  		  height: 100%;
  		}
  		.header {
  		  height: 50px;
  		  background-color: #545c64;
  		  line-height: 50px;
  		  text-align: center;
  		  font-size: 24px;
  		  color: #fff;
  		}
  		.footer {
  		  height: 40px;
  		  line-height: 40px;
  		  background-color: #888;
  		  position: absolute;
  		  bottom: 0;
  		  width: 100%;
  		  text-align: center;
  		  color: #fff;
  		}
  		.main {
  		  display: flex;
  		  position: absolute;
  		  top: 50px;
  		  bottom: 40px;
  		  width: 100%;
  		}
  		.content {
  		  flex: 1;
  		  text-align: center;
  		  height: 100%;
  		}
  		.left {
  		  flex: 0 0 20%;
  		  background-color: #545c64;
  		}
  		.left a {
  		  color: white;
  		  text-decoration: none;
  		}
  		.right {
  		  margin: 5px;
  		}
  		.btns {
  		  width: 100%;
  		  height: 35px;
  		  line-height: 35px;
  		  background-color: #f5f5f5;
  		  text-align: left;
  		  padding-left: 10px;
  		  box-sizing: border-box;
  		}
  		button {
  		  height: 30px;
  		  background-color: #ecf5ff;
  		  border: 1px solid lightskyblue;
  		  font-size: 12px;
  		  padding: 0 20px;
  		}
  		.main-content {
  		  margin-top: 10px;
  		}
  		ul {
  		  margin: 0;
  		  padding: 0;
  		  list-style: none;
  		}
  		ul li {
  		  height: 45px;
  		  line-height: 45px;
  		  background-color: #a0a0a0;
  		  color: #fff;
  		  cursor: pointer;
  		  border-bottom: 1px solid #fff;
  		}

  		table {
  		  width: 100%;
  		  border-collapse: collapse;
  		}

  		td,
  		th {
  		  border: 1px solid #eee;
  		  line-height: 35px;
  		  font-size: 12px;
  		}

  		th {
  		  background-color: #ddd;
  		}
  	  </style>
  </head>
  <body>
  <div id="app">
  	<router-view />
  </div>
  <script>
  	const App = {
  	  template: `
  		<div>
  		  <!-- 头部区域 -->
  		  <header class="header">后台管理系统</header>
  		  <!-- 中间主体区域 -->
  		  <div class="main">
  			<!-- 左侧菜单栏 -->
  			<div class="content left">
  			  <ul>
  				<li><a href="#">用户管理</a></li>
  				<li><a href="#">权限管理</a></li>
  				<li><a href="#">商品管理</a></li>
  				<li><a href="#">订单管理</a></li>
  				<li><a href="#">系统设置</a></li>
  			  </ul>
  			</div>
  			<!-- 右侧内容区域 -->
  			<div class="content right">
  			  <div class="main-content">
  			  <!-- <router-view /> -->
  			</div>
  		  </div>
  		  </div>
  		  <!-- 尾部区域 -->
  		  <footer class="footer">版权信息</footer>
  	  </div>
  	  `
  	}
  	const router = new VueRouter({
  	  routes: [
  		{path: '/', component: App}
  	  ]
  	})
  	const app = new Vue({
  		el: '#app',
  		router
  	 });
   </script>
  </body>
  </html>

3.2、把左侧菜单改造为路由链接

  • 代码3.2-1：

      <!-- 左侧菜单栏 -->
  			<div class="content left">
  			  <ul>
  				<li><router-link to="/users">用户管理</router-link></li>
  				<li><router-link to="/rights">权限管理</router-link></li>
  				<li><router-link to="/goods">商品管理</router-link></li>
  				<li><router-link to="/orders">订单管理</router-link></li>
  				<li><router-link to="/settings">系统设置</router-link></li>
  			  </ul>
  			</div>

3.3、创建左侧菜单对应的组件

  • 代码3.3-1：

      const Users = {
 		template: `
 			<div>
 				用户管理
 			</div>
 		`
 	}
 	const Rights = {
 		template: `
 			<div>
 				权限管理
 			</div>
 		`
 	}
 	const Goods = {
 		template: `
 			<div>
 				商品管理
 			</div>
 		`
 	}
 	const  Orders= {
 		template: `
 			<div>
 				订单管理
 			</div>
 		`
 	}
 	const Settings = {
 		template: `
 			<div>
 				设置管理
 			</div>
 		`
 	}

3.4、右侧主体区域添加路由占位符

  • 代码3.4-1：

      <!-- 右侧内容区域 -->
  <div class="content right">
    <div class="main-content">
  	<router-view /> 
  </div>
</div>

3.5、添加子路由规则

+代码3.5-1：

const router = new VueRouter({
	  routes: [
		{
			path: '/',
			 component: App,
			 children: [
				 {name: 'users', path: '/users', component: Users},
				 {name: 'rights', path: '/rights', component: Rights},
				 {name: 'goods', path: '/goods', component: Goods},
				 {name: 'orders', path: '/orders', component: Orders},
				 {name: 'settings', path: '/settings', component: Settings},
			 ]
		}
	  ]
	})

3.6、通过路由重定向默认渲染用户组件

  • 代码3.6-1：

       path: '/',
   component: App,
   redirect: 'users',
   children: [
   ...

3.7、渲染用户列表数据

  • 代码3.7-1：

      const Users = {
  		template: `
  			<div>
  				<h3>用户管理</h3>
  				<table>
  					<thead>
  						<tr>
  							<th>ID</th>
  							<th>姓名</th>
  							<th>年龄</th>
  							<th>操作</th>
  						</tr>
  					</thead>
  					<tbody>
  						<tr v-for="user in userList" :key="user.id">
  							<td>{{ user.id }}</td>
  							<td>{{ user.name }}</td>
  							<td>{{ user.age }}</td>
  							<td><a href="javascript:;">详情</a></td>
  						</tr>
  					</tbody>
  				</table>
  			</div>
  		`,
  		data() {
  			return {
  				userList: [
  					{id: 1, name: '张三', age: 22},
  					{id: 2, name: '李四', age: 32},
  					{id: 3, name: '王五', age: 25},
  					{id: 4, name: '刘菲', age: 27},
  				]
  			}
  		}
  	}

3.8、编程式导航跳转到用户详细页

  • 代码3.8-1：

      // 添加点击事件
  <td><a href="javascript:;" @click.prevent="goDetail(user.id)">详情</a></td>
  methods: {
  			goDetail(id) {
  				this.$router.push(`/userInfo/${id}`)
  			}
  },

  // 创建UserInfo组件
  const UserInfo = {
  		props: ['id'],
  		template: `
  			<div>
  				<h5>用户详情页</h5>
  				<p>用户ID：{{ id }} </p>
  			</div>
  		`
   }
  // 添加路由规则
  {name: 'userInfo', path: '/userInfo/:id', component: UserInfo, props: true},

  • 效果图示3.8-1：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NhMwEj29-1596036571161)(./images/2020-07-28_p-userInfo_1.png)]

3.9、实现后退功能

  • 详情页修改，代码3.9-1：

       const UserInfo = {
  		props: ['id'],
  		template: `
  			<div>
  				<h5>用户详情页</h5>
  				<p>用户ID：{{ id }} </p>
  				<button @click="goBack">返回</button>
  			</div>
  		`,
  		methods: {
  			goBack() {
  				this.$router.go(-1)
  			}
  		},
  	}

  • 效果图示3.9-1：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oZjlIDwN-1596036571163)(./images/2020-07-28_p-userInfo-goback.png)]

4、完整代码及效果图

  • 完整代码4-1：

      <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>10_router-backend-manager</title>
  	<script src="../../node_modules/vue/dist/vue.js"></script>
  	<script src="../../node_modules/vue-router/dist/vue-router.js"></script>
  	<style type="text/css">
  		html,
  		body,
  		#app {
  		  margin: 0;
  		  padding: 0px;
  		  height: 100%;
  		}
  		.header {
  		  height: 50px;
  		  background-color: #545c64;
  		  line-height: 50px;
  		  text-align: center;
  		  font-size: 24px;
  		  color: #fff;
  		}
  		.footer {
  		  height: 40px;
  		  line-height: 40px;
  		  background-color: #888;
  		  position: absolute;
  		  bottom: 0;
  		  width: 100%;
  		  text-align: center;
  		  color: #fff;
  		}
  		.main {
  		  display: flex;
  		  position: absolute;
  		  top: 50px;
  		  bottom: 40px;
  		  width: 100%;
  		}
  		.content {
  		  flex: 1;
  		  text-align: center;
  		  height: 100%;
  		}
  		.left {
  		  flex: 0 0 20%;
  		  background-color: #545c64;
  		}
  		.left a {
  		  color: white;
  		  text-decoration: none;
  		}
  		.right {
  		  margin: 5px;
  		}
  		.btns {
  		  width: 100%;
  		  height: 35px;
  		  line-height: 35px;
  		  background-color: #f5f5f5;
  		  text-align: left;
  		  padding-left: 10px;
  		  box-sizing: border-box;
  		}
  		button {
  		  height: 30px;
  		  background-color: #ecf5ff;
  		  border: 1px solid lightskyblue;
  		  font-size: 12px;
  		  padding: 0 20px;
  		}
  		.main-content {
  		  margin-top: 10px;
  		}
  		ul {
  		  margin: 0;
  		  padding: 0;
  		  list-style: none;
  		}
  		ul li {
  		  height: 45px;
  		  line-height: 45px;
  		  background-color: #a0a0a0;
  		  color: #fff;
  		  cursor: pointer;
  		  border-bottom: 1px solid #fff;
  		}

  		table {
  		  width: 100%;
  		  border-collapse: collapse;
  		}

  		td,
  		th {
  		  border: 1px solid #aaa;
  		  line-height: 35px;
  		  font-size: 12px;
  		}

  		th {
  		  background-color: #ddd;
  		}
  	  </style>
  </head>
  <body>
  <div id="app">
  	<router-view />
  </div>
  <script>
  	const App = {
  	  template: `
  		<div>
  		  <!-- 头部区域 -->
  		  <header class="header">后台管理系统</header>
  		  <!-- 中间主体区域 -->
  		  <div class="main">
  			<!-- 左侧菜单栏 -->
  			<div class="content left">
  			  <ul>
  				<li><router-link to="/users">用户管理</router-link></li>
  				<li><router-link to="/rights">权限管理</router-link></li>
  				<li><router-link to="/goods">商品管理</router-link></li>
  				<li><router-link to="/orders">订单管理</router-link></li>
  				<li><router-link to="/settings">系统设置</router-link></li>
  			  </ul>
  			</div>
  			<!-- 右侧内容区域 -->
  			<div class="content right">
  			  <div class="main-content">
  				<router-view /> 
  			</div>
  		  </div>
  		  </div>
  		  <!-- 尾部区域 -->
  		  <footer class="footer">版权信息</footer>
  	  </div>
  	  `
  	}
  	const Users = {
  		template: `
  			<div>
  				<h3>用户管理</h3>
  				<table>
  					<thead>
  						<tr>
  							<th>ID</th>
  							<th>姓名</th>
  							<th>年龄</th>
  							<th>操作</th>
  						</tr>
  					</thead>
  					<tbody>
  						<tr v-for="user in userList" :key="user.id">
  							<td>{{ user.id }}</td>
  							<td>{{ user.name }}</td>
  							<td>{{ user.age }}</td>
  							<td><a href="javascript:;" @click.prevent="goDetail(user.id)">详情</a></td>
  						</tr>
  					</tbody>
  				</table>
  			</div>
  		`,
  		data() {
  			return {
  				userList: [
  					{id: 1, name: '张三', age: 22},
  					{id: 2, name: '李四', age: 32},
  					{id: 3, name: '王五', age: 25},
  					{id: 4, name: '刘菲', age: 27},
  				]
  			}
  		},
  		methods: {
  			goDetail(id) {
  				this.$router.push(`/userInfo/${id}`)
  			}
  		},
  	}
  	const UserInfo = {
  		props: ['id'],
  		template: `
  			<div>
  				<h5>用户详情页</h5>
  				<p>用户ID：{{ id }} </p>
  				<button @click="goBack">返回</button>
  			</div>
  		`,
  		methods: {
  			goBack() {
  				this.$router.go(-1)
  			}
  		},
  	}
  	const Rights = {
  		template: `
  			<div>
  				权限管理
  			</div>
  		`
  	}
  	const Goods = {
  		template: `
  			<div>
  				商品管理
  			</div>
  		`
  	}
  	const  Orders= {
  		template: `
  			<div>
  				订单管理
  			</div>
  		`
  	}
  	const Settings = {
  		template: `
  			<div>
  				设置管理
  			</div>
  		`
  	}
  	const router = new VueRouter({
  	  routes: [
  		{
  			path: '/',
  			 component: App,
  			 redirect: 'users',
  			 children: [
  				 {name: 'users', path: '/users', component: Users},
  				 {name: 'userInfo', path: '/userInfo/:id', component: UserInfo, props: true},
  				 {name: 'rights', path: '/rights', component: Rights},
  				 {name: 'goods', path: '/goods', component: Goods},
  				 {name: 'orders', path: '/orders', component: Orders},
  				 {name: 'settings', path: '/settings', component: Settings},
  			 ]
  		}
  	  ]
  	})
  	const app = new Vue({
  		el: '#app',
  		router
  	 });
   </script>
  </body>
  </html>

  • 效果图示：

    • 整体界面4-1：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TZ0pQ6NP-1596036571164)(./images/2020-07-28_p-vue-ui.png)]

    • 详情页4-2：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iP3j9O89-1596036571166)(./images/2020-07-28_p-userInfo-goback_1.png)]

后记 ：

vue官网地址：https://cn.vuejs.org/

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA
gaog2zh
关注
专栏目录
[Vue.js] 路由 -- 基于vue-router的案例--后台管理
DeathDomain的博客
11-04 753
基于vue-router的案例 感觉好多,啊啊啊!!! 实现效果   实现步骤 抽离并渲染App根组件 将左侧菜单改造为路由链接 创建左侧菜单对应的路由组件 在右侧主体区域添加路由占位符 添加子路由规则 通过路由重定向默认渲染用户组件 渲染用户列表数据 编程式导航跳转到用户详情页 实现后退功能   抽离并渲染App根组件 首先要引入vue.js和vue-router.js <script src="https://cdn.jsdelivr.net/npm/vue/di
vue2+vuex+vue-router 快速入门（三） vue 实例介绍
minksyb的专栏
12-07 2296
vue 实例介绍　　vue 实例分两种，一种为组件实例，另外一种为根实例。组件实例负责创建个性化组件、而根实例负责把组件渲染到指定的真实的 DOM 结构中。并且 vue 为我们提供了一种特殊的文件格式 .vue 来创建 组件实例。.vue 文件格式如下：*.vue<template> ... </template><script> export default { d
vue.js路由vue-router（一）——简单路由基础
weixin_34259232的博客
05-09 159
前言 vue.js除了拥有组件开发体系之外，还有自己的路由vue-router。在没有使用路由之前，我们页面的跳转要么是后台进行管控，要么是用a标签写链接。使用vue-router后，我们可以自己定义组件路由之间的跳转，还可以设置稍复杂的嵌套路由，创建真正的spa（单页面应用）。我之前用vue-cli脚手架写了一个简单的人员管理实例，现在...
vue-router基本流程及其案例分析
最新发布
ma_no_lo的博客
09-03 1415
在这个阶段，前端基本上只写界面，也就是html,css,js那些东西，然后在界面中挖槽用来接后端数据，包括路由也由后端负责，在这个阶段中，web开发非常依赖后端，常见的后端框架有python中的flask。
vue-router路由使用实例详解
小小默：进无止境
11-16 1090
【1】路由入门 官网文档：https://router.vuejs.org/zh/installation.html github: https://github.com/vuejs/vue-router 下载安装 npm install vue-router --save 引入模块 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ...
基于vue-router的实例案例
weixin_46005715的博客
07-13 448
基本样式如下: <head> <meta charset="UTF-8" /> <title>基于vue-router的实例案例</title> <style type="text/css"> html, body, #app { margin: 0; padding: 0px; height: 100%; } .he
Vue学习第27天——路由vue-router的详解及案例练习
背心的博客
09-21 2530
路由vue-router的详解及案例练习
vue-router案例.zip
01-25
在基于 VueRouter 的后台管理系统中，路由扮演着至关重要的角色，它负责连接不同的组件和视图，实现页面间的导航和数据传递。下面将详细介绍如何在 Vue 项目中运用 Vue Router 实现后台管理功能。 1. **安装 Vue ...
基于vue-cli 的 Element UI 的后台系统模板
02-21
Vue.js 是一个流行的前端JavaScript框架，它以轻量级、高效和可组合的组件系统...同时，项目中还涉及到组件化、状态管理、路由、API交互等多个前端开发的重要概念和技术，是学习和实践 Vue.js 和 Element UI 的好案例。
vue-elementUI后台管理系统 v1.0.zip
04-02
这个后台管理系统的核心技术栈是Vue.js和Element UI，这意味着它具备响应式布局、组件化开发、状态管理（Vuex）和路由管理（Vue Router）等功能。开发者可以在此基础上快速搭建企业级后台应用，同时也可以根据实际...
laravel-vue-admin:Laravel + Vue实现前阶段分离的后台管理系统https
03-11
Laravel Vue管理员管理系统 项目简介 laravel-vue-admin是一套基于Vue全家桶（Vue2.x + Vue-router2.x + Vuex）+ Laravel的前分离框架。后台所需要的功能模块 前一级分离设计，前端代码在admin目录，除以前后台页面...
vue-router路由简单案例介绍
12-02
官方文档： 旧版：https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版：http://router.vuejs.org/（2.0版本） 此文是旧版 文件结构图： 基本用法： 是一个顶级的路由外链，用于渲染匹配的组件。 例如：我的应用入口是app.vue 那么在app.vue中添加如下代码， 此处涉及ES6。 app.vue <router-view class="view" keep-alive
【vue案例】vue实现后台管理路由
马云
11-07 2956
vue实现后台管理路由 文章目录vue实现后台管理路由前言一、准备静态模板二、根据项目整体布局划分组件结构1、抽离并渲染App根组件2、将左侧导航改为路由链接3、创建左侧菜单对应的路由组件4、添加到右侧主体区域添加路由占位符：5、添加子路由规则6、通过路由重定向默认渲染指定用户组件7、渲染用户列表数据8、编程式导航跳转到用户详情页9、回退功能三、完整代码 前言 首先，看下我们基于Vue-Router实现的后台管理路由具体效果： 一、准备静态模板 <!DOCTYPE html> <html
vue-admin动态路由的实现
目标检测专栏持续更新中，改进YOLO系列通用，适用v5、v7、v8、所有博客均是团队原创博客，所有文章禁止转载，违者必究。
03-01 1238
前言：项目开发中菜单栏往往是后端基于角色控制的，所以菜单栏通过后端返回，然后在进行渲染，vue-admin这个管理系统模板用的人贼多，以此为例。 一、首先打开router/index.js文件吗，把constantRoutes写的静态路由全删了，只留下公共的界面，比如login、404之类的。其他路由后面通过接口获取。 二、在store/modules/permission.js进行修改，如果没有文件就创建，该文件使用vuex的状态管理，把菜单信息存储起来，最后把菜单渲染出去 // router/in.
vue-router—13案例：功能分析&&编写插件
jiaojsun的博客
06-14 147
为什么要写插件呢，因为有一些公用的方法每次都要引入到组件里面比较麻烦，所以可以编写一个插件，看下面的例子 如何写插件 打印出来 再举一个例子 ...
vue.js路由（vue-router）详解+案例
清风无虑skr的博客
06-18 1704
简介： 对于大多数单页面应用，都推荐使用官方支持的vue-router，其实简单的说路由就是跳转，和HTML<a>标签实现的效果是一样的，都是添加过路径后便可以跳转到相应位置，可能有人会说那还学vue-router干嘛直接用a标签实现不就可以了，这里就要提到vue的优点了，vue-router让构建单页面应用变得易如反掌，而如果使用a标签你需要写好多代码构造页面。(●ˇ∀ˇ●) 安装： 1、通过script标签直接引用 https://unpkg.com/vue-router@2.0.0/dis
五:前端路由--基于Vue-router的案例
Hhytyq的博客
03-11 410
一：概述 常见的后台管理系统： 用到的路由技术要点： 路由的基础用法 嵌套路由 路由重定向 路由传参 编程式导航 基本样式： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>基于vue-router的案例</title...
基于 vue-router 的案例：后台管理路由案例
icemwj的博客
08-10 1348
案例：后台管理路由案例 案例分析： 1. 用到的路由技术要点： 路由的基础用法 嵌套路由 路由重定向 路由传参 编程式导航 2. 根据项目的整体布局划分好组件结构，通过路由导航控制组件的显示 抽离并渲染 App 根组件 将左侧菜单改造为路由链接 创建左侧菜单对应的路由组件 在右侧主体区域添加路由占位符 添加子路由规则 通过路由重定向默认渲染用户组件 渲染用户列表数据 编程式导航跳转到用户详情页 实现后退功能 案例完整代码： <!DOCTYPE html> <html lang="
vue-router案例
Mia的博客
04-27 200
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>基于vue-router的案例</title> <style type="text/css"> html, body, ...
VUE路由实战：后台管理系统素材下载
资源摘要信息:"本资源为一个以Vue.js为基础的后台管理系统的案例素材，其中详细介绍了VUE路由的使用和配置。本案例适合于已经有一定前端开发基础，特别是对Vue.js有所了解的学习者。案例不仅提供了实际操作的素材，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gaog2zh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值