前端框架Vue：vue-router 路由的使用

最新推荐文章于 2024-10-01 14:06:54 发布
最新推荐文章于 2024-10-01 14:06:54 发布
阅读量430 收藏 1
点赞数
文章标签： vue js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44178366/article/details/110745372
版权

Vue前端路由

一、路由的基本概念与原理

l路由是一个比价广义和抽象的概念、路由的本质就是对应关系

后端路由

  • 概念：根据不同的用户URL请求，返回不同的内容
  • 本质：URL请求地址与服务器资源之间的对应关系

前端路由

  • 概念：根据不同的用户事件，显示不同的页面内容
  • 本质：用户事件与事件处理函数之间的对应关系

**[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D4KWoCao-1607245101425)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201205102801219.png)]**

Vue Router

是Vue.js官网的路由管理器，它和Vue.js的核心深度继承，可以非常方便的用于SPA应用程序的开发

Vue Router包含的功能

  • 支持HTML5历史模式或hash模式
  • 支持嵌套路由
  • 支持路由参数
  • 支持编程式路由
  • 支持路由命名。。。

二、vue-router的基本使用

1、基本使用步骤

  • 引入相关的库文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eoy2yjXG-1607245101427)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201205110151442.png)]

  • 添加路由链接

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cDfNDNVr-1607245101429)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201205110707907.png)]

  • 添加路由填充位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lua089DV-1607245101431)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201205110912896.png)]

  • 定义路由组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-An2Oo4jm-1607245101432)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201205111107024.png)]

  • 配置路由规则并创建路由实例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hCVXglA7-1607245101434)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201205111308268.png)]

  • 把路由挂载到Vue根实例中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3iJBw3cf-1607245101436)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201205114416784.png)]

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 1、引入相关的库文件 -->
		<script src="js/vue_2.5.22.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>
		<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 type="text/javascript">
			/* 4、定义路由组件 */
			const User = {
				template: `<div>User组件</div>`
			}
			const Register = {
				template: `<div>Register组件</div>`
			}
			
			/* 5、配置路由规则 */
			const router = new VueRouter({
				//所有的路由规则
				routes:[
					{path:'/user',component:User}, //这里的component不接收字符串
					{path:'/register',component:Register}
				]
			})
			
			const vm = new Vue({
				el:'#app',
				data:{
					
				},
				/* 6、挂载路由实例对象 */
				// router:router
				router //当名字一致的时候可以简写
			})
		</script>
	</body>
</html>

2、路由重定向

重定向指的是：用户在访问地址A的时候，强制用户跳转到C，从而展示特定的组件页面；通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vdq3NRI4-1607245101437)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201205115429104.png)]

/* 5、配置路由规则 */
			const router = new VueRouter({
				//所有的路由规则
				routes:[
					//路由重定向  redirect
					{path:'/',redirect:'/user'},
					{path:'/user',component:User}, //这里的component不接收字符串
					{path:'/register',component:Register}
				]
			})

三、vue-router嵌套路由

嵌套路由功能分析

  • 点击父级路由链接显示模板内容
  • 模板内容中又有子级路由链接
  • 点击子级路由链接显示子级模板内容

使用实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 1、引入相关的库文件 -->
		<script src="js/vue_2.5.22.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>
		<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 type="text/javascript">
			/* 4、定义路由组件 */
			const User = {
				template: `<div>User组件</div>`
			}
			const Register = {
				template: `<div>
					<h1>Register组件</h1><hr/>
					
					<router-link to='/register/tab1'>tab1</router-link>
					<router-link to='/register/tab2'>tab2</router-link>
					<router-view />
					
				</div>`
			}
			
			const Tab1 = {
				template:'<h3>tab1子组件</h3>'
			}
			const Tab2 = {
				template:'<h3>tab2子组件</h3>'
			}
			
			/* 5、配置路由规则 */
			const router = new VueRouter({
				//所有的路由规则
				routes:[
					{path:'/user',component:User}, //这里的component不接收字符串
					/*  6、children,数组，配置子路由规则 */
					{path:'/register',component:Register,children:[
						{path:'/register/tab1',component:Tab1},
						{path:'/register/tab2',component:Tab2}
					]}
				]
			})
			
			const vm = new Vue({
				el:'#app',
				data:{
					
				},
				/* 7、挂载路由实例对象 */
				// router:router
				router //当名字一致的时候可以简写
			})
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aXVGUfHd-1607245101438)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201206092824016.png)]

四、vue-router动态路由匹配

思想？如果我们有很多的url地址，那是否需要为每一个url都定义一个组件呢？？ 如果有几百几千个url呢？

1、动态匹配路由的基本用法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WHmG7HT5-1607245101441)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201206093314052.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IKBpMqom-1607245101444)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201206093322933.png)]

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 1、引入相关的库文件 -->
		<script src="js/vue_2.5.22.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>
		<div id="app">
			<!-- 2、添加路由连接 -->
			<router-link to="/user/1">User1</router-link>
			<router-link to="/user/2">User2</router-link>
			<router-link to="/user/3">User3</router-link>
			<router-link to="/register">Register</router-link>
			
			<!-- 3、添加路由占位符 -->
			<router-view></router-view>
		</div>
		
		<script type="text/javascript">
			/* 4、定义路由组件 */
			const User = {
				template: `<div>User组件---用户id为：{{$route.params.id}}</div>`
			}
			const Register = {
				template: `<div>Register组件</div>`
			}
			
			/* 5、配置路由规则 */
			const router = new VueRouter({
				//动态路由匹配规则,以冒号开头
				routes:[
					{path:'/user/:id',component:User}, //这里的component不接收字符串
					{path:'/register',component:Register}
				]
			})
			
			const vm = new Vue({
				el:'#app',
				data:{
					
				},
				/* 6、挂载路由实例对象 */
				router 
			})
		</script>
	</body>
</html>
2、路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所有可以使用props将组件和路由解耦

props的值为布尔类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zRd2ldzE-1607245101445)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201206095246248.png)]

props的值为对象类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vBFTgmmF-1607245101445)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201206095652504.png)]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 1、引入相关的库文件 -->
		<script src="js/vue_2.5.22.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>
		<div id="app">
			<!-- 2、添加路由连接 -->
			<router-link to="/user/1">User1</router-link>
			<router-link to="/user/2">User2</router-link>
			<router-link to="/user/3">User3</router-link>
			<router-link to="/register">Register</router-link>
			
			<!-- 3、添加路由占位符 -->
			<router-view></router-view>
		</div>
		
		<script type="text/javascript">
			/* 4、定义路由组件 */
			const User = {
				props:['id','name','age'],
				//注意：通过对象传参的方式，这里的id值是接收不到的
				template: `<div>User组件---用户id为：{{id}}-----名字：{{name}}-----{{age}}</div>`
			}
			const Register = {
				template: `<div>Register组件</div>`
			}
			
			/* 5、配置路由规则 */
			const router = new VueRouter({
				//动态路由匹配规则,以冒号开头
				routes:[
					{path:'/user/:id',component:User,props:{name:'pihao',age:18}}, //这里的component不接收字符串
					{path:'/register',component:Register}
				]
			})
			
			const vm = new Vue({
				el:'#app',
				data:{
					
				},
				/* 6、挂载路由实例对象 */
				router 
			})
		</script>
	</body>
</html>

props的值为函数类型

可以传一些静态数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YG0qpall-1607245101446)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201206104149880.png)]

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 1、引入相关的库文件 -->
		<script src="js/vue_2.5.22.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>
		<div id="app">
			<!-- 2、添加路由连接 -->
			<router-link to="/user/1">User1</router-link>
			<router-link to="/user/2">User2</router-link>
			<router-link to="/user/3">User3</router-link>
			<router-link to="/register">Register</router-link>
			
			<!-- 3、添加路由占位符 -->
			<router-view></router-view>
		</div>
		
		<script type="text/javascript">
			/* 4、定义路由组件 */
			const User = {
				props:['id','name','age'],
				//注意：通过对象传参的方式，这里的id值是接收不到的
				template: `<div>User组件---用户id为：{{id}}-----名字：{{name}}-----年龄：{{age}}</div>`
			}
			const Register = {
				template: `<div>Register组件</div>`
			}
			
			/* 5、配置路由规则 */
			const router = new VueRouter({
				//路由参数传递为一个 函数
				routes:[
					{path:'/user/:id',component:User,props:route =>({name:'pihao',age:18,id:route.params.id})}, //这里的component不接收字符串
					{path:'/register',component:Register}
				]
			})
			
			const vm = new Vue({
				el:'#app',
				data:{
					
				},
				/* 6、挂载路由实例对象 */
				router 
			})
		</script>
	</body>
</html>

五、vue-router命名路由

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-11ZkhQPs-1607245101447)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201206111712492.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FA73rUg6-1607245101447)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201206111834348.png)]

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 1、引入相关的库文件 -->
		<script src="js/vue_2.5.22.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>
		<div id="app">
			<!-- 2、添加路由连接 -->
			<router-link to="/user/1">User1</router-link>
			<router-link to="/user/2">User2</router-link>
			<!-- 使用命名路由，to需要属性绑定: -->
			<router-link :to="{name:'user',params:{id:3}}">User3</router-link>
			<router-link to="/register">Register</router-link>
			
			<!-- 3、添加路由占位符 -->
			<router-view></router-view>
		</div>
		
		<script type="text/javascript">
			/* 4、定义路由组件 */
			const User = {
				props:['id','name','age'],
				//注意：通过对象传参的方式，这里的id值是接收不到的
				template: `<div>User组件---用户id为：{{id}}-----名字：{{name}}-----年龄：{{age}}</div>`
			}
			const Register = {
				template: `<div>Register组件</div>`
			}
			
			/* 5、配置路由规则 */
			const router = new VueRouter({
				//动态路由匹配规则,以冒号开头
				routes:[
					{
						name:'user', //name，为路由命名
						path:'/user/:id',
						component:User,
						props:route =>({name:'pihao',age:18,id:route.params.id})
					},
					{path:'/register',component:Register}
				]
			})
			
			const vm = new Vue({
				el:'#app',
				data:{
					
				},
				/* 6、挂载路由实例对象 */
				router 
			})
		</script>
	</body>
</html>

六、vue-router编程式导航

  • 声明式导航：通过点击链接实现导航的方式，叫做声明式导航 ，常用的a标签
  • 编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航，如：window.href()

1、编程式导航基本用法

常用的编程式导航API如下

  • this.$router.push(‘hash地址’)

  • this.$router.go(n) ,1表示前进一位，-1表示后退一位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u0scRWKw-1607245101448)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201206113113464.png)]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue_2.5.22.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>
		<div id="app">
		
			<router-link to="/user/1">User1</router-link>
			<router-link to="/user/2">User2</router-link>
			
			<router-link :to="{name:'user',params:{id:3}}">User3</router-link>
			<router-link to="/register">Register</router-link>
			
			
			<router-view></router-view>
		</div>
		
		<script type="text/javascript">
			
			const User = {
				props:['id','name','age'],
				template: `
					<div>
						User组件---用户id为：{{id}}-----名字：{{name}}-----年龄：{{age}}
						<button @click = 'goRegister'>跳转到注册页面</button>
					</div>
					
				`,
				methods:{  
					goRegister:function(){
						this.$router.push('/register')
					}
				}
			}
			const Register = { 
				template: `
					<div>
						<h1>Register组件</h1>
						<button @click = 'goBack'>后退</button>
					</div>
				`,
				methods:{
					goBack:function(){
						this.$router.go(-1); //往后跳转一个页面
					}
				}
			}
			
			
			const router = new VueRouter({
				
				routes:[
					{
						name:'user', //name，为路由命名
						path:'/user/:id',
						component:User,
						props:route =>({name:'pihao',age:18,id:route.params.id})
					},
					{path:'/register',component:Register}
				]
			})
			
			const vm = new Vue({
				el:'#app',
				data:{
					
				},
				
				router 
			})
		</script>
	</body>
</html>

2、编程式导航参数规则

router.push（）方法的参数规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UQ1nWgbL-1607245101449)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201206114754424.png)]

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue_2.5.22.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>
		<div id="app">
		
			<router-link to="/user/1">User1</router-link>
			<router-link to="/user/2">User2</router-link>
			
			<router-link :to="{name:'user',params:{id:3}}">User3</router-link>
			<router-link to="/register">Register</router-link>
			
			
			<router-view></router-view>
		</div>
		
		<script type="text/javascript">
			
			const User = {
				props:['id','name','age'],
				template: `
					<div>
						User组件---用户id为：{{id}}-----名字：{{name}}-----年龄：{{age}}
						<button @click = 'goRegister'>跳转到注册页面</button>
					</div>
					
				`,
				methods:{  
					goRegister:function(){
						this.$router.push('/register')
					}
				}
			}
			const Register = { 
				template: `
					<div>
						<h1>Register组件</h1>
						<button @click = 'goBack'>后退</button>
					</div>
				`,
				methods:{
					goBack:function(){
						this.$router.go(-1); //往后跳转一个页面
					}
				}
			}
			
			
			const router = new VueRouter({
				
				routes:[
					{
						name:'user', //name，为路由命名
						path:'/user/:id',
						component:User,
						props:route =>({name:'pihao',age:18,id:route.params.id})
					},
					{path:'/register',component:Register}
				]
			})
			
			const vm = new Vue({
				el:'#app',
				data:{
					
				},
				
				router 
			})
		</script>
	</body>
</html>

七、基于vue-router的案例

基于路由实现的综合案例，技术点分析

  • 抽离并渲染App根组件
  • 将左侧菜单路由链接
  • 创建左侧菜单对应的路由组件
  • 在右侧主体区域添加路由路由占位符
  • 添加子路由规则
  • 通过路由重定向默认渲染用户组件
  • 渲染用户列表数据
  • 编程式导航跳转到用户详情页面
  • 实现返回上一页功能
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>基于vue-router的案例</title>
    <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>
    <script src="./js/vue_2.5.22.js"></script>
    <script src="./js/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 要被 vue 实例所控制的区域 -->
    <div id="app">
			<!-- 路由占位符 -->
			<router-view></router-view>
    </div>

    <script>
		/* 定义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">
										<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},
					]
				}
			},
			methods:{
				goDetail(id){
					console.log(id);
					//将参数id传递过去
					this.$router.push('/userInfo/'+id) 
				}
			},
			template:`<div> 
				<h3>用户管理区域</h3>
				<table>
					<thead>
						<tr>
							<th>编号</th>
							<th>名字</th>
							<th>年龄</th>
							<th>操作</th>
						</tr>
					</thead> 
					<tbody>
						<tr v-for='(item,index) in userList' :key='item.id'>
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.age}}</td>
							<td>
								<a href='#' @click.prevent='goDetail(item.id)'>查看详情</a>
							</td>
						</tr>
						
					</tbody>
				</table>
			</div>`
		}
		<!-- 定义用户详情页面 -->
		const userInfo = {
			props:['id'],
			methods:{
				//实现后退功能
				goBack(){
					this.$router.go(-1);
				}
			},
			template:`<div>
				<h5>用户详情页面----用户id为：{{id}}</h5>
				<button @click='goBack'>返回上一页</button>
			</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>`
		}
		
		
		<!-- 创建路由对象 -->
		const router = new VueRouter({
			routes:[
				{
					path:'/',
					component:App,
					redirect:'/users',
					children:[ //配置子路由
						{path:'/users',component:Users},
						{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>
倔强的耗子
关注
Vue.js：使用Vue-Router 2实现路由功能介绍
01-19
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-router 一、使用路由 在main.js中，需要明确安装路由功能： import ...
html中使用vue-router
热门推荐
诗水人间
07-07 17万+
引入vue和vue-router <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 完整的示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g
Vue路由配置
2301_80365562的博客
09-02 395
5.指定路由跳转：app.vue组件里 ---4.指定路由显示入口：app.vue组件里 1.安装路由：npm install --save vue-router。2.配置文件：src --> router --> index.js。注：圈红的组件：src --> views -->3.引入路由显示入口：main.js。
Vue2（十三）：路由
最新发布
Kiwi23333的博客
10-01 1169
vue-rooter：是vue的一个插件库，专门用来实现SPA应用1、路由就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。2、key 为路径, value 可能是 function 或 component组件3、vue 的一个插件库（vue-router），专门用来实现 SPA 应用。
html中vue_router简单实例
jacks
12-14 3405
功能：使用路由进行组件（页面）切换 （极简：只有切换功能） 一、写出基本元素 <div id="main"> <button @click="gotoLogin">login</button> <button @click="gotoRegister">register</button> <router-view></router-view> <!-- 内容显示的位置 --> </d
在html页面使用vue
qq_45149139的博客
09-01 647
template属性为每个组件指定了不同的模板。并且，在每个组件中使用了data函数，返回一个对象，用于存储每个组件独有的自定义内容。 你可以根据需要修改每个组件的内容和样式，并使用{{ }}插值语法来访问和展示customContent属性中的数据。 这样，你就可以为每个菜单项定义不同的内容，并且在右侧显示相应的内容。
45. Vue路由vue-router的基本使用
DevOps海洋的渔夫@专栏
07-19 564
前言 在使用vue-router之前，首先要认识一下前端路由和后端路由的区别概念。 什么是路由 后端路由:对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 例如：https://www.ximalaya.com/my/subscribed/ 前端路由:对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一...
Web前端框架应用：第5章 Vue路由-vue-router.pptx
06-06
Web前端框架应用：第5章 Vue路由-vue-router.pptx
Web前端框架应用：第5章 Vue路由-命名路由.pptx
06-06
vue-router提供了一种隐式的引用路径，即命名路由，可以在创建Router实例的时候，在 routes 中给某个路由设置名称name值。通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的...
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
vue-router 4 你真的熟练吗？，3年前端开发工程师面试经验分享
m0_60453176的博客
03-19 368
注意：之前 component 引入组件的时候，后边可以省略 .vue 后缀，但在 vue-router 4这不能省略后缀，否则就报错了。导航守卫主要用来通过跳转或取消的方式守卫导航，有很多种方式植入路由导航中：全局的、单个路由独享的或者组件级的。组件内的守卫与之前使用不同，vue-router4中，需要从vue-router内引入需要的插件。安装完成之后，可以在 package.json 文件查看vue-router的版本。添加子路由时，第一个属性值是父级路由的 name 属性值。
Vue3-Router4 五.嵌套路由
weixin_43995121的博客
06-24 260
一些应用程序的 UI 由多层嵌套的组件组成。这样就可以实现关于H5页面去展示底部跳转数据，对应路由页面显示。因此，你可以根据自己的需要，不断地嵌套视图。TIPS：不要忘记写router-view。配置只是另一个路由数组，就像。
Vue-router路由的props配置
李公子的博客
08-14 7953
作用：让路由组件更方便的收到参数 第一种写法：props值为对象 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件 children: [ { name: 'xiangqing', path:'detail', component: Detail, // props对象中所有的key-value的组合最终都会通过props传给Detail组件
4.4 vue-router的安装和配置
天天向上
01-06 583
vue-router是Vue.js官方的路由插件，它是和Vue.js深度集成的，适用于构建单页面应用。 vue-router是基于路由和组件的。 路由用于设定访问路径，将路径和组件映射起来。 在vue-router的单页面应用中，路径的改变就是组件的切换 安装vue-router npm installvue-router --save 在src中创建router文件夹，在router文件夹下创建index.js文件，在此文件中配置路由相关信息 index.js中的内容 import...
vue路由跳转时更改页面title
web_xyk的专栏
05-25 8354
一、router文件夹下的index文件中给每个path添加meta:{}： export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' ...
html5使用vue路由,Vue2.0笔记——vue-router路由
weixin_32535637的博客
06-17 1324
简介使用Vue.js开发SPA(Single Page Application)单页面应用。vue-router可以通过html5的history API或者hash实现单页应用，即不刷新跳转，切换地址，只是页面上的组件的切换；vue-router可以实现页面间传参等其他功能；基本用法当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)...
vue3后台管理项目，后端返回动态路由
light的博客~~~
06-23 8653
vue3后台管理项目，后端返回动态路由
vue 动态路由的另外一种方式（后台返回动态路由JSON数据，前端遍历显示组件）
一键写代码的博客
07-01 5064
http://www.php.cn/js-tutorial-406277.html 推荐
Vue 路由（Router）详细介绍（切换，传参，通信）
高大志leo的博客
12-09 1万+
在一个vue项目中，免不了对组件（页面）进行切换与跳转。而用 Vue.js + Vue Router 创建单页应用，感觉很自然：使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。 话不多说，直接开始！！！ 准备工作 在使用脚手架vue-cli3创建（vue create projectName）一个vue项目时，
前端路由解析：Vue-Router的Hash与History模式
然而，现代前端框架利用这一点来实现路由切换。当`hashchange`事件触发时，我们可以监听这个事件并在回调中处理页面的更新，以实现页面视图的切换。例如： ```javascript window.addEventListener('hashchange', ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值