路由
-
主要要通过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 路由对象的时候,可以为构造函数,传递一个配置对象
<div id="app">
<a href='#/login'>登录</a>
<a href='#/register'>注册</a>
<router-view></router-view> //vue-router 提供的元素,专门用来当占位符
</div>
var login ={
template:'<h1>登录组件</h1>'
}
var register ={
template:'<h1>注册组件</h1>'
}
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 的使用
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</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;}
<trainsition mode="out-in">
<router-view></router-view>
</trainsition>
路由规则中定义参数–query传参
<div id="app">
<router-link to="/login?id=10">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view> //vue-router 提供的元素,专门用来当占位符
</div>
var login ={
template:'<h1>登录组件---id为{{$route.query.id}}</h1>',
create:{
console.log(this.$route.query.id)
}
}
var register ={
template:'<h1>注册组件</h1>'
}
var router = new VueRouter({
routes:[
{path:'/login',component:login}
{path:'/register',component:register}
]
})
var vm = new Vue({
el:'app',
data:{},
...
router // 属性名和属性值一样的时候,可以省略属性值(等价于 router:router)
路由规则中定义参数–params传参
<router-link to="/login/10/liming">登录</router-link>
{path:'/login:id/:name',component:login}
var login ={
template:'<h1>登录组件---id为{{$route.params.id}}</h1>',
create:{
console.log(this.$route.params.id)
}
}
使用 childern 属性实现路由
<div id="app">
<router-view></router-view> //vue-router 提供的元素,专门用来当占位符
</div>
<template id="tmp1">
<div>
<h1>account组件</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
</div>
</template>
var account={
template:'#tmp1'
}
var login ={
template:'<h1>登录组件}</h1>',
}
var register ={
template:'<h1>注册组件</h1>'
}
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)
使用命名视图实现经典布局
<div id="app">
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
var header = {template:'<h1>头部</h1>'}
var leftBox = {template:'<h1>左边栏区域</h1>'}
var mainBox = {template:'<h1>主题区域</h1>'}
var router = new VueRouter({
routes:[
path:{'/',components:{
default:header,
left:leftBox,
main:mainBox,
}}
]
})
使用 watch 监听文本框
<div id="app">
<input type="text" v-mode="firstname">+
<input type="text" v-mode="last">=
<input type="text" v-mode="fullname">
</div>
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 监视
<div id="app">
<input type="text" v-mode="firstname">+
<input type="text" v-mode="last">=
<input type="text" v-mode="fullname">
</div>
var vm = new Vue({
el:'app',
data:{
firstname:'',
lasttname:'',
fullname:'',
},
watch:{},
//在 comupted 中可以定义一些属性(计算属性),计算属性的本质就是一个方法
computed:{
//注意 计算属性在引用的时候不加()去调用;
//只要计算属性 function 内部,所用到的任何 data 中的数据发生变化,就会立即重新计算
// 计算属性的结果,会被缓存,方便下次直接使用,如果计算属性方法中,数据没有变化,则不会重新计算
'fullname':function(){
return this.firstname + '-' + this.lastname;
}
}
}