JS-Vue路由(2021-12-10)

最新推荐文章于 2022-12-02 18:10:23 发布

weixin_42569047

最新推荐文章于 2022-12-02 18:10:23 发布

阅读量217

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42569047/article/details/121884235

版权

Vue路由

根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)
//使用路由：
（1）导入文件：
//vue.js放在html文件的同级目录下，即保存原有结构，避免是之前的html文件中相关vue元素失效
//vue-router.js文件放同一个项目的新建js文件中
//1.导入vue.js文件
//2.导入vue-router.js文件
（2）创建路由
①创建Vue对象
②创建路由对象VueRouter
③创建组件
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue路由复习</title>
		<script src="vue.js"></script>
		<script src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用了路由
					router-link将被浏览器翻译成a标签
					to将被浏览器翻译成href属性
					-->
			<router-link to="/runoob">runoob111</router-link>
			<router-link to="/w3c">w3c222</router-link>
			<!-- router-view：在这里展示，如果没有这行代码，无法展示 -->
			<!-- 上面两行为a标签，下面一行代码才是匹配组件，并展示组件内容 -->
			<!-- 2.路由出口，将在这里展示，匹配到的组件的内容 -->
			<router-view></router-view>
		</div>
		
		
		<script>
			
			let runoob={
				template:'<a href="http://www.runoob.com"  target="_blank">runoob</a>'
			}
			let w3c={
				template:'<a href="http://www.w3school.com.cn" target="_blank">w3c</a>'
			}
			
			//VueRouter对象是vue提供的用来完成路由功能的核心对象
			let router=new VueRouter({
				//routes属性是VueRouter对象的核心属性，用来确定详细的路由规则
				routes:[
					//分发请求，确定每个请求应该匹配到哪个组件
					//routes是数组形式，可以创建多种路由规则
					//描述路由的具体规则  分发请求：根据请求匹配组件
					//         请求路径                 组件名
					{path:"/w3c",component:w3c},
					{path:"/runoob",component:runoob}
				]
			})
			
			
			new Vue({
				el:"#app",
				router
			})
		</script>
	</body>
</html>

weixin_42569047

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-Vue路由(2021-12-10)

Vue路由根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)//使用路由：（1）导入文件：//vue.js放在html文件的同级目录下，即保存原有结构，避免是之前的html文件中相关vue元素失效//vue-router.js文件放同一个项目的新建js文件中//1.导入vue.js文件//2.导入vue-router.js文件（2）创建路由①创建Vue对象②创建路由对象VueRouter③创建组件示例：<!DOCTYPE html>&lt
复制链接

扫一扫