vue-router路由组件的使用2.X
2017-08-07 本文已影响0人
xiaoaiai
vue2.X升级后router组件改动比较大,不过个人感觉改的更方便更简单了;
下面给大家介绍下1.X与2.X的区别与2.Xvue-router的使用方法;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>vue2.X路由组件的使用</title>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="vue/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script src="vue/vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--vue 2.X router2.X (大版本号对应大版本号2-2)-->
<div id="app">
<ul>
<li>
<!--2.X以后取消了v-link与v-link-active(<a v-link="'/home'">HOME</a>)改为下面的-->
<router-link to="/home">HOME</router-link>
</li>
<li>
<router-link to="/news">NEWS</router-link>
</li>
<!--v-link-active 1.X的(<li v-link-active><a v-link="'/news'">NEWS</a></li>) 改为如下-->
<!--a标签不要有href-->
<router-link tag='li' to='/about'>
<a>ABOUT</a>
</router-link>
</ul>
<div>
<router-view></router-view>
</div>
</div>
<template id="home">
<h3>HomePage</h3>
</template>
<template id="news">
<h3>NewsPage</h3>
</template>
<template id="about">
<h3>AboutPage</h3>
</template>
<script type="text/javascript">
// 定义home与news组件,不需要像1.X那样extend
var Home = {
template: '#home'
}
var News = {
template: '#news'
}
var About = {
template: '#about'
}
// 设置路径与注册组件
var routers = [{
path: '/home',
component: Home
},
{
path: '/news',
component: News
},
{
path: '/about',
component: About
}
]
// 准备路由
var router = new VueRouter({
routes: routers
})
// 启动路由(2.X不需要template:'<router-view></router-view>')
new Vue({
el: '#app',
router: router
})
</script>
</body>
</html>
