vue ---- 路由

最新推荐文章于 2024-07-23 16:00:30 发布

Sky皓皓

最新推荐文章于 2024-07-23 16:00:30 发布

阅读量312

点赞数

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

本文链接：https://blog.csdn.net/Skyhaohao/article/details/120007148

版权

本文主要介绍了Vue.js中的路由概念，包括路由的基本概述、入门案例、路由的嵌套机制以及转发和重定向的原理。通过入门案例，详细演示了如何在Vue应用中设置和绑定路由，以及实现页面的跳转。同时，对路由的嵌套和Vue中的转发、重定向进行了讲解，帮助理解Vue应用程序中页面间导航的实现方式。

摘要由CSDN通过智能技术生成

vue ---- 路由

vue中的路由

vue中的路由

1. 概述

路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程
路由是指路由器从一个接口上收到数据包，根据数据包的目的地址进行定向并转发到另一个接口的过程
用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

2. 入门案例

实现步骤：
- 引入JS类库
- 指定路由跳转链接
- 指定路由填充位
- 封装路由对象
- vue对象绑定路由

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>
		<div id="app">
			<h1>实现路由案例</h1>
			<!-- 2.定义路由标签 -->
			<!-- 2.1 a标签说明：
					a标签：超链接标签，href属性：请求跳转的地址
			 -->
			<a href="http://www.baidu.com">百度</a>
			<!-- 2.2 路由标签说明：
					router-link：解析为a标签
					to: 解析为href属性
			 -->
			<router-link to="/home">主页</router-link>
			<router-link to="/welcome">欢迎</router-link>
			<!-- 3.指定路由填充位(占位符)
					需要给组件一个展现的位置，需要提前定义(类似于一个div)
			 -->
			 <router-view></router-view>
			 <!--  -->
		</div>
		<!-- 定义template标签 -->
		<template id="homeTem">
			<div>
				<h1>这是系统首页</h1>
			</div>
		</template>
		<template id="welcomeTem">
			<div>
				<h1>欢迎使用组件</h1>
			<