VUE2 入坑指南06--路由
路由
-
主要要通过url 中的 hash (#) ，来实现不同页面之间的切换，特点：http请求中不会包含hash相关的内容
-
引入：
npm install vue-router import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
基本使用
- 使用 cdn 导入 vue.js 和 vue-router.js 包
- 导入后 window 全局对象中，就有 VueRouter 的路由构造函数，在new 路由对象的时候，可以为构造函数，传递一个配置对象
var login ={
template:'登录组件
'
}
var register ={
template:'注册组件
'
}
var routerObj = new VueRouter({
routes:[ //path 监听路由地址；component 展示对应的组件
//注意：component 属性值，必须是一个组件的模板对象，不能是组件的引用名称
{path:'/login',component:login}
{path:'/register',component:register}
]
})
var vm = new Vue({
el:'app',
data:{},
...
router:routerObj //将路由规则对象，注册到 vm 实例上
})
router-link 的使用
路由 redirect 重定向
{path:’/’,redirect:’/login’} //页面加载后默认渲染login组件
设置选中路由高亮
- 给 router-link-active 设置样式
- 构造类中配置激活类名，后设置样式
var routerObj = new VueRouter({
routes:[...],
linkActiveClass:'myactive'
})
为路由切换启动动画
.v-enter,.v-leave-to{opacity:0;transform:translateX{140px;}}
.v-enter-active,v-leave-active{transition:all 0.5s ease;}
路由规则中定义参数–query传参
登录
注册
var login ={
template:'登录组件---id为{
{$route.query.id}}
',
create:{
console.log(this.$route.query.id)
}
}
var register ={
template:'注册组件
'
}
var router = new VueRouter({
routes:[
{path:'/login',component:login}
{path:'/register',component:register}
]
})
var vm = new Vue({
el:'app',
data:{},
...
router // 属性名和属性值一样的时候，可以省略属性值（等价于 router：router）
路由规则中定义参数–params传参
{path:'/login:id/:name',component:login}
var login ={
template:'登录组件---id为{
{$route.params.id}}
',
create:{
console.log(this.$route.params.id)
}
}
使用 childern 属性实现路由
account组件
登录
注册
var account={
template:'#tmp1'
}
var login ={
template:'登录组件}
',
}
var register ={
template:'注册组件
'
}
var router = new VueRouter({
routes:[
{
path:'/account',
component:account,
children:[
{path:'login',component:login} //子路由的路径不加 /
{path:'register',component:register}
]
}
]
})
var vm = new Vue({
el:'app',
data:{},
...
router // 属性名和属性值一样的时候，可以省略属性值（等价于 router：router）
使用命名视图实现经典布局
var header = {template:'头部
'}
var leftBox = {template:'左边栏区域
'}
var mainBox = {template:'主题区域
'}
var router = new VueRouter({
routes:[
path:{'/',components:{
default:header,
left:leftBox,
main:mainBox,
}}
]
})
使用 watch 监听文本框
+
=
var vm = new Vue({
el:'#app',
data:{
firstname:'',
lasttname:'',
fullname:'',
},
methods:{},
watch:{ //watch 属性，监视 data 中指定数据的变化，然后触发watch中对应的fuc
firstname:function(newVal,oldVal){} //属性名可以不加引号，除非有-拼接的属性名
}
})
watch 监视路由地址的改变
var vm = new Vue({
el:'app',
data:{},
...
router // 属性名和属性值一样的时候，可以省略属性值（等价于 router：router）
watch:{ //监听地址栏路由的改变
'$route.path':function(newVal,oldVal){
}
}
computed 监视
+
=
var vm = new Vue({
el:'app',
data:{
firstname:'',
lasttname:'',
fullname:'',
},
watch:{},
//在 comupted 中可以定义一些属性（计算属性），计算属性的本质就是一个方法
computed:{
//注意 计算属性在引用的时候不加（）去调用；
//只要计算属性 function 内部，所用到的任何 data 中的数据发生变化，就会立即重新计算
// 计算属性的结果，会被缓存，方便下次直接使用，如果计算属性方法中，数据没有变化，则不会重新计算
'fullname':function(){
return this.firstname + '-' + this.lastname;
}
}
}
VUE2 入坑指南05–组件
VUE2 入坑指南07–vuex