Vue——路由简易后台管理系统（七）

最新推荐文章于 2024-08-19 00:15:00 发布

bei-zhen

最新推荐文章于 2024-08-19 00:15:00 发布

阅读量1.6k

点赞数 4

分类专栏： WEB前端文章标签： vue

本文链接：https://blog.csdn.net/qq_33591873/article/details/111189112

版权

WEB前端专栏收录该内容

60 篇文章 15 订阅

订阅专栏

一、路由的概念

路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。
那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由
1).后端路由是由服务器端进行实现，并完成资源的分发
2).前端路由是依靠hash值(锚链接)的变化进行实现

后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由
前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系
前端路由主要做的事情就是监听事件并分发执行事件处理函数

二、Vue Router简介

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

三、Vue Router的使用步骤

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Vue路由基本使用</title>
    <!-- 1.导入js文件 -->
    <script src="js/vue.min.js"></script>
    <script src="js/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 2.添加路由链接 -->
	  <router-link to="/user">User</router-link>
	  <router-link to="/register">Register</router-link>
	  
	  <!-- 3.添加路由占位符 -->
	  <router-view></router-view>
    </div>

    <script>
		
		// 4.定义路由组件
		const User = {
			template:'<h1>User组件</h1>'
		}
		const Register = {
			template:'<h1>Register组件</h1>'
		}
		
		// 5.创建路由实例对象
		const router = new VueRouter({
			//6.配置路由规则
			routes:[
				{path:'/user',component:User},
				{path:'/register',component:Register},
			]
		})
		
      
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 7.挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

四、简易后台管理系统

1.效果图：
在这里插入图片描述
2.思路：

3.涉及技术点：

4.代码:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>基于vue-router的后台管理案例</title>
		<link rel="stylesheet" type="text/css" href="css/vrouter.css" />
		<!-- 导入js文件 -->
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- Vue实例所控制的区域 -->
		<div id="app">
			<!-- 路由占位符 -->
			<router-view></router-view>
		</div>

		<script type="text/javascript">
			// 定义App根组件
			const App = {
				template: `<div>
				        <!-- 头部区域 -->
				        <header class="header">Vue简易后台管理系统</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></router-view>
							</div>
				          </div>
				        </div>
				        <!-- 尾部区域 -->
				        <footer class="footer">版权信息</footer>
				      </div>`
			}

			<!-- 创建左侧菜单对应的路由组件 -->
			const Users = {
				<!-- 定义子组件私有数据 -->
				data() {
					return {
						userList: [{
								id: 1,
								name: '张三',
								age: 10
							},
							{
								id: 2,
								name: '李四',
								age: 20
							},
							{
								id: 3,
								name: '王五',
								age: 30
							},
							{
								id: 4,
								name: '赵六',
								age: 40
							}
						]
					}
				},
				template: `<div>
					<h3>用户管理区域</h3>
					<table>
						<thead>
							<tr><th>编号</th><th>姓名</th><th>年龄</th><th>详情</th></tr>
						</thead>
						<tbody>
							<tr v-for='item in userList' key='item.id'>
								<td>{{item.id}}</td>
								<td>{{item.name}}</td>
								<td>{{item.age}}</td>
								<!-- 防止页面刷新javascript:; -->
								<td><a href='javascript:;' @click='goDetail(item.id)'>详情</a></td>
							</tr>
						</tbody>
					</table>
				</div>`,
				methods:{
					goDetail(id){
						<!-- 使用编程式导航实现路由跳转 -->
						this.$router.push('/userinfo/' + id);
					}
				}
			}
			<!-- 定义用户信息详情页组件 -->
			const UserInfo = {
				props:['id'],
				template:`<div>
					<h5>用户详情页 --- 用户id为：{{id}}</h5>
					<button @click='goBack()'>后退</button>
				</div>`,
				methods:{
					goBack(){
						//实现后退功能
						this.$router.go(-1);
					}
				}
			}
			
			const Rights = {
				template: `<div>
					<h3>权限管理区域</h3>
				</div>`
			}
			const Goods = {
				template: `<div>
					<h3>商品管理区域</h3>
				</div>`
			}
			const Orders = {
				template: `<div>
					<h3>订单管理区域</h3>
				</div>`
			}
			const Settings = {
				template: `<div>
					<h3>系统设置区域</h3>
				</div>`
			}

			<!-- 创建路由对象 -->
			const router = new VueRouter({
				<!-- 定义路由规则 -->
				routes: [{
					path: '/',
					component: App,
					<!-- 默认访问根路径 -->
					redirect: '/users',
					<!-- 定义子路由规则 -->
					children: [{
							path: '/users',
							component: Users
						},
						<!-- :id绑定动态参数 -->
						{
							path: '/userinfo/:id',
							component: UserInfo,
							props:true
						},
						{
							path: '/rights',
							component: Rights
						},
						{
							path: '/goods',
							component: Goods
						},
						{
							path: '/orders',
							component: Orders
						},
						{
							path: '/settings',
							component: Settings
						}
					]
				}]
			})

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