Vue路由
1.后端路由 对于一个普通的网站 所有的超链接都是一个URL地址 所有的URL地址都指向服务器上的某个资源
2.前端路由 对于单页面应用程序 通过URL中的hash(#)来实现不同页面的切换
通过#号改变切换页面的方式 我们称为前端路由
在Vue中使用路由
1.安装路由模块
2.使用a标签进行导航 目的就是为改变URL 使其能被监听
3.使用router-view 去显示匹配的组件
4.创建组件模板对象
5.创建路由实例 通过routes属性去定义路由匹配规则
6.将路由实例挂载到VM实例中
通过查询字符串得到参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过查询字符串得到参数</title>
<script src="../libs/vue-2.4.0.js"></script>
<script src="../libs/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login?id=3&name=zhangsan">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: "<h1>登陆组件 {{$route.query.id}} --- {{this.$route.query.name}}</h1>",
data: function() {
return {
msg: "111"
}
},
methodsL: {}
}
var reg = {
template: "<h1>注册组件</h1>"
}
var router = new VueRouter({
routes: [
{path: "/login", component: login},
{path: "/register", component: reg},
]
})
var vm = new Vue({
el: "#app",
router
})
</script>
</body>
</html>
实现经典布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现经典布局</title>
<script src="../libs/vue-2.4.0.js"></script>
<script src="../libs/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
<script>
var header = {
template: "<h1>我来组成头部</h1>"
}
var left = {
template: "<h1>我来组成导航栏</h1>"
}
var main = {
template: "<h1>我来组成主体</h1>"
}
//创建路由对象
var router = new VueRouter({
routes: [
/*{path:'/', component: header},
{path:'/left', component: left},
{path:'/main', component: main}*/
{path: '/', components: {
'default':header,
'left':left,
'main':main
}}
]
})
var vm = new Vue({
el: "#app",
router
})
</script>
</body>
</html>
路由嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由嵌套</title>
<script src="D:\develop\Web\js/vue-2.4.0.js"></script>
<script src="D:\develop\Web\js/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-link to="/parent">父组件</router-link>
<router-view></router-view>
</div>
<template id="parent">
<div>
<h1>小燕子 穿花衣 年年春天来这里 我问燕子你为啥来 燕子说 管好你自己</h1>
<router-link to="/parent/login">登陆</router-link>
<router-link to="/parent/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
var parent = {
template: "#parent"
}
var login = {
template: "<h1>登陆组件</h1>"
}
var reg = {
template: "<h1>注册组件</h1>"
}
var router = new VueRouter({
routes: [
{
path: '/parent',
component: parent,
// 使用children属性 实现子路由 同时 子路由不需要携带/ 否则会从根路径发送请求
children: [
{path: 'login', component: login},
{path: 'register', component: reg}
]
},
/* {path: '/login', component: login},
{path: '/register', component: reg},*/
]
})
var vm = new Vue({
el: "#app",
router
})
</script>
</body>
</html>
Watch监听数据变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Watch监听数据变化</title>
<script src="../libs/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="first">+
<input type="text" v-model="last" >=
<input type="text" v-model="full">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
first:'',
last:'',
full:''
},
watch: {
'first' :function(newv, oldv) {
// console.log(newv + '------' + oldv)
this.full = newv + this.last
},
'last' :function(newv, oldv) {
// console.log(newv + '------' + oldv)
this.full = this.first + newv;
}
}
})
</script>
</body>
</html>