欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue.js的路由简单实例

程序员文章站 2022-03-25 11:30:22
...
<html>
<header>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<style>
.active{
	width: 100px;
	height: 100px;
	background: #444;
	color: #eee;
}
.danger {
	background: #eee;
	color: #fff;
}
</style>
</header>
<body>
<div id="firstapp">
<p>Hello Router!</p>
<p>
	<router-link to="/dongjin">dongjin</router-link>
	<router-link to="/hexin">hexin</router-link>
	<router-link to="/baidu">baidu</router-link>
</p>

<router-view></router-view>

</div>
<script>

var dongjin = {template: '<div><h1>dongjin template</h1></div>'}
var hexin = {template: '<div class="active">hexin template</div>'}
var baidu = {template: '<div class="danger">baidu template</div>'}

var routes = [
	{path: '/dongjin', component: dongjin},
	{path: '/hexin', component: hexin},
	{path: '/baidu', component: baidu}
]

var router = new VueRouter({
	routes
})

var vm = new Vue({
	router
}).$mount('#firstapp')

</script>
</body>
</html>
相关标签: vue 路由