vue-VueRouter-背景管理案例

文章目錄

1、UI界面
2、項目分析
3、項目改造
- 3.1、抽離并渲染App根元件
- 3.2、把左側菜單改造為路由連結
- 3.3、建立左側菜單對應的元件
- 3.4、右側主體區域添加路由占位符
- 3.5、添加子路由規則
- 3.6、通過路由重定向預設渲染使用者元件
- 3.7、渲染使用者清單資料
- 3.8、程式設計式導航跳轉到使用者詳細頁
- 3.9、實作後退功能
4、完整代碼及效果圖
- ***後記*** ：

内容

1、UI界面

一般情況下，前端頁面由UI做好頁面（html+css)給我們，我們根據UI頁面修改為Vue項目。

UI頁面代碼

<!DOCTYPE html>
  <html >
  <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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >使用者管理</a></li>
  			  <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >權限管理</a></li>
  			  <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >商品管理</a></li>
  			  <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >訂單管理</a></li>
  			  <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >系統設定</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：

vue-VueRouter-背景管理案例1、UI界面2、項目分析3、項目改造4、完整代碼及效果圖

2、項目分析

根據項目的整體布局劃分好元件結構，通過路由導航控制元件的顯示。功能實作及步驟如下：

抽離并渲染App根元件
把左側菜單改造為路由連結
建立左側菜單對應的元件
右側主體區域添加路由占位符
添加子路由規則
通過路由重定向預設渲染使用者元件
渲染使用者清單資料
程式設計式導航跳轉到使用者詳細頁
實作後退功能

3、項目改造

3.1、抽離并渲染App根元件

代碼3.1-1：

<!DOCTYPE html>
  <html >
  <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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >使用者管理</a></li>
  				<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >權限管理</a></li>
  				<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >商品管理</a></li>
  				<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >訂單管理</a></li>
  				<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >系統設定</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:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >詳情</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:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  @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：

vue-VueRouter-背景管理案例1、UI界面2、項目分析3、項目改造4、完整代碼及效果圖

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：

vue-VueRouter-背景管理案例1、UI界面2、項目分析3、項目改造4、完整代碼及效果圖

4、完整代碼及效果圖

完整代碼4-1：

<!DOCTYPE html>
  <html >
  <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:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  @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：
  
  vue-VueRouter-背景管理案例1、UI界面2、項目分析3、項目改造4、完整代碼及效果圖
- 詳情頁4-2：
  
  vue-VueRouter-背景管理案例1、UI界面2、項目分析3、項目改造4、完整代碼及效果圖

後記：

vue官網位址：https://cn.vuejs.org/

本項目為參考某馬視訊開發，相關視訊及配套資料可自行度娘或者聯系本人。上面為自己編寫的開發文檔，持續更新。歡迎交流，本人QQ:806797785

前端項目源代碼位址：https://gitee.com/gaogzhen/vue
後端JAVA源代碼位址:https://gitee.com/gaogzhen/JAVA

vue-VueRouter-背景管理案例1、UI界面2、項目分析3、項目改造4、完整代碼及效果圖

vue-VueRouter-背景管理案例

目錄

文章目錄

内容

1、UI界面

2、項目分析

3、項目改造

3.1、抽離并渲染App根元件

3.2、把左側菜單改造為路由連結

3.3、建立左側菜單對應的元件

3.4、右側主體區域添加路由占位符

3.5、添加子路由規則

3.6、通過路由重定向預設渲染使用者元件

3.7、渲染使用者清單資料

3.8、程式設計式導航跳轉到使用者詳細頁

3.9、實作後退功能

4、完整代碼及效果圖

後記：

繼續閱讀

vue中父元件調用子元件的方法

Vue監視資料原理

vue項目：npm打包-S和-D差別：

vue滑動插件：vue-drag-verify

vue插件的使用

使用Vue自定義元件出現的錯誤

Vue+原生JS實作點選粘貼到剪貼闆

vue時間段選擇器實作的功能

VueX 做狀态管理( state , mutations , getters , actions 概念)

vue 中英文切換

【GIT】git指令行代碼送出流程及注意事項

Django項目實戰——3—(圖形驗證碼後端邏輯、短信驗證碼、短信驗證碼後端邏輯)1、圖形驗證碼後端邏輯2、短信驗證碼3、短信驗證碼後端邏輯

vue3 transitionvue3 transition元件和vue2 transition元件

vue學習筆記day12 vue的生命周期

父子元件間傳值的實作父子元件間傳值的實作

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目

vue-VueRouter-背景管理案例1、UI界面2、項目分析3、項目改造4、完整代碼及效果圖

vue-VueRouter-背景管理案例

目錄

文章目錄

内容

1、UI界面

2、項目分析

3、項目改造

3.1、抽離并渲染App根元件

3.2、把左側菜單改造為路由連結

3.3、建立左側菜單對應的元件

3.4、右側主體區域添加路由占位符

3.5、添加子路由規則

3.6、通過路由重定向預設渲染使用者元件

3.7、渲染使用者清單資料

3.8、程式設計式導航跳轉到使用者詳細頁

3.9、實作後退功能

4、完整代碼及效果圖

後記 ：

繼續閱讀

後記：