vue(11)路由

小灰灰 2022-01-10 14:55 162阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>vue</title>
    	<style type="text/css">	
    	</style>
    </head>
    <body>
    	<script src="vue.min.js"></script>
    	<script src="vue-router.min.js"></script>
    	<div id="div1">
    		<div class="menu">
    			<router-link to="/user">用户管理</router-link>
    			<router-link to="/product">产品管理</router-link>
    			<router-link to="/order">订单管理</router-link>
    		</div>
    		<div class="wordingRoom">
    			
    			<router-view></router-view>
    		</div>
    	</div>
    
    	<script type="text/javascript">
    		//声明三个模板
    		var user = { template:'<p>用户管理页面内容</p>'}
    		var product = { template:'<p>产品管理页面内容</p>'}
    		var order = { template:'<p>订单管理页面内容</p>'}
    
    		//定义路由
    		var routes = [
    			{ path:'/',redirect:'/user'},
    			{ path:'/user',component:user},
    			{ path:'/product',component:product},
    			{ path:'/order',component:order}
    		];
    
    		//创建VueRouter实例
    		var router = new VueRouter({ 
    			routes:routes
    		});
    
    		//给vue对象绑定路由
    		new Vue({ 
    			el:"#div1",
    			router
    		})
    	</script>
    	
    </body>
    </html>

![在这里插入图片描述][201906201056091.png]

[201906201056091.png]: /images/20220110/bd69b760b87c40e7a7c6ecfe8c6273f8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE_vue动态路由，引入所有路由，vue路由模块化

require.context 主要使用require.context实现前端工程化动他引入文件 require.context(directory, useSubdir

蔚落/ 2022年11月04日 00:52/ 0 赞/ 276 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 410 阅读

相关 vue 路由

[https://router.vuejs.org/zh-cn/][https_router.vuejs.org_zh-cn] 用 Vue.js + vue-router 创

蔚落/ 2022年06月07日 10:54/ 0 赞/ 272 阅读

相关 Vue路由

一个实例： <!DOCTYPE html> <html> <head> <title>Vue.js路由router</title>

绝地灬酷狼/ 2022年05月10日 09:44/ 0 赞/ 283 阅读

相关 vue路由

一、App.vue中的<router-view></router-view> 凡是定义到index.js中的组件，都会被渲染到App.vue中二、路由跳转和a标签的

秒速五厘米/ 2022年03月08日 11:24/ 0 赞/ 373 阅读

相关 Vue路由

vue-router 基本使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

蔚落/ 2022年02月24日 02:56/ 0 赞/ 328 阅读

相关 vue(11)路由

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

小灰灰/ 2022年01月10日 14:55/ 0 赞/ 163 阅读

相关 vue路由

Vue.js - vue路由一什么是路由 1. 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 2. 前端

灰太狼/ 2022年01月05日 07:23/ 0 赞/ 347 阅读

相关 vue路由

vue路由一、vue关于路由的5个重要对象 > 1、router-view：类似angular中的router-outlet，router-view会不断的改

浅浅的花香味﹌/ 2021年09月15日 14:48/ 0 赞/ 519 阅读

相关 Vue路由

Vue路由一、路由 1.路由的发展二、js原生监听hash值的变化三、vue-router 四、vue-router的使用

墨蓝/ 2021年09月07日 06:12/ 0 赞/ 533 阅读