Vue.js 路由简单实例

最新推荐文章于 2021-07-30 14:45:39 发布

jifubu6013

最新推荐文章于 2021-07-30 14:45:39 发布

阅读量279

点赞数

route

routes

router

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app">
		<router-link to="/h5">h5</router-link>
		<router-link to="/java">java</router-link>
		<router-link to="/python">python</router-link>
		<router-view></router-view>
	</div>

	<template id="h5">
		<div>
		<h2>html5</h2>
		<p>html5html5</p></div>
	</template>
		<template id="java">
			<div>
		<h2>java</h2>
		<p>javajava</p></div>
	</template>

	<template id="python">
		<div>
		<h2>python</h2>
		<p>pythonpython</p></div>
	</template>

<script src="F:/JS/vue.js"></script>
<script src="F:/JS/vue-router.js"></script>
<script type="text/javascript">
	var Html5=Vue.extend({
		template:"#h5"
	})

	var Java=Vue.extend({
		template:"#java"
	})
	var Python=Vue.extend({
		template:"#python"
	})

var routes=[{
	path:"/h5",component:Html5
},{
path:"/java",component:Java
},{
	path:"/python",component:Python
},
{path:"/",redirect:"/h5"}]
var router=new VueRouter({
	routes
})
var app=new Vue({
router
}).$mount("#app")
</script>
</body>
</html>