（一）Vue-router 路由
1.在一个系统的app中，由多个页面组成，通常会使用vue中组件来实现，那么当从一个页面跳到另一个页面时，通过url路径来实现，哪个url对应哪个页面，在VUE中是通过vue-router来实现的。
（二）路由的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!---第一步：引入vue.js 和 vue-router.js--->
<script src = "vue.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<!---第二步：创建模板--->
<div id ="app">
<router-link to='/login'>登录</router-link>
<router-link to='/register'>注册</router-link>
<!---占位符--->
<router-view></router-view>
</div>
</body>
<!---第三步：创建路由--->
<script type = "text/javascript">
//定义跟组件
var App = Vue.extend()
//定义注册组件
var register = Vue.extend({
template: '<h2>注册。。。</h2>'
})
//定义登录组件
var login = Vue.extend({
template: '<h2>登录。。。</h2>'
})
// 定义路由，并且注册路由规则
var VueRouter = new VueRouter({
routes:[
{path:'/',register:'/login'},
{path:'/login',component:login},
{path:'/register',component:register},
]
})
// 使用路由
new Vue ({
el: '#app',
router: VueRouter
})
</script>
</html>
（三）路由的传值
vue2.0的路由参数定义实现url的传值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!---第一步：引入vue.js 和 vue-router.js--->
<script src = "vue.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<!---第二步：创建模板--->
<div id ="app">
<router-link to='/login'>登录</router-link>
<router-link to='/register/xiaoqi'>注册</router-link>
<!---占位符--->
<router-view></router-view>
</div>
</body>
<!---第三步：创建路由--->
<script type = "text/javascript">
//定义跟组件
var App = Vue.extend()
//定义注册组件
var register = Vue.extend({
template: '<h2>注册:{{oname}}</h2>',
data:function(){
return {
oname: ''
}
},
created:function(){
this.oname=this.$route.params.uname
}
})
//定义登录组件
var login = Vue.extend({
template: '<h2>登录</h2>'
})
// 定义路由，并且注册路由规则
var VueRouter = new VueRouter({
routes:[
{path:'/',register:'/login'},
{path:'/login',component:login},
{path:'/register/:uname',component:register},
]
})
// 使用路由
new Vue ({
el: '#app',
router: VueRouter
})
</script>
</html>
网友评论