[Vue.js] 路由 -- 基于vue-router的案例--后台管理

基于vue-router的案例

感觉好多,啊啊啊!!!

---

实现效果

 

实现步骤

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

 

抽离并渲染App根组件

• 首先要引入vue.js和vue-router.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.4.8/dist/vue-router.js"></script>

• 创建实例对象

const vm = new Vue({
   
    el:'#app',
    router
})

• 定义一个App的根组件

const App={
   
	template:`
		<div>
			<\!-- 头部区域 -->
			<header class="header">远古神兽后台管理开发版</header>
			<\!-- 中间主体区域 -->
			<div class="main">
				<\!-- 左侧菜单栏 -->
				<div class="content left">
					<ul>
                    <li>神兽拍卖管理</li>
                    <li>权限开放管理</li>
                    <li>商品粮食管理</li>
                    <li>订单派送管理</li>
                    <li>系统设置</li>
					</ul>
				</div>
				<\!-- 右侧内容区域 -->
				<div class="content right"><div class="main-content">添加用户表单</div></div>
			</div>
			<\!-- 尾部区域 -->
			<footer class="footer">版权信息</footer>
		</div>
	`
}

• 渲染根组件,创建路由对象

const router = new VueRouter({
   
	routes:[
	//父路由规则
		{
   
			path:'/',
			component: App,

		}
	]
})

将左侧菜单改造为路由链接

• 改造路由链接

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">添加用户表单</div></div>
			</div>
			<\!-- 尾部区域 -->
			<footer class="footer">版权信息</footer>
		</div>
	`
}

 

创建左侧菜单对应的路由组件

• 创建路由组件

const Users = {
   
	template:`
		<div>
			<h3>神兽拍卖区域</h3>
		</div>
	`
}
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>
	`
}

 

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

• 在App里添加路由占位符

<div class="content right"><div class="main-content"><router-view/></div></div>

 

添加子路由规则

• 新增children属性,存放子组件

const router = new VueRouter({
   
	routes:[
	//父路由规则
		{
   
			path:'/',
			component: App,
			//子路由规则
			children:[
            {
   path:'/users',component:Users},
            {
   path:'/rights',component:Rights},
            {
   path:'/goods',component:Goods},
            {
   path:'/orders',component:Orders},
            {
   path:'/settings',component:Settings}
			]

		}
	]
})

 

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

• 访问根路径访问默认的神兽拍卖管理

const router = new VueRouter({
   
	routes:[
	//父路由规则
		{
   
			path:'/',
			component: App,
			//重定向
			redirect:'/users',
			//子路由规则
			children:[
            {
   path:'/users',component:Users},
            {
   path:'/rights'