vue-cli路由vue-router
2018-07-28 本文已影响28人
大菜鸟呀
一、安装
1、下载模板vue init webpack vue-example
2、进入vue-example 下载模板npm install
3、启动应用：npm run dev
<style scoped></style>表示局部有效
配置路由：
export default new Router({
mode: 'history', //路由模式（history模式可以去掉 #）
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/home',
name: 'home',
component: Home,
alias: '/index' //配置路由别名（即 访问'index'相当于访问'/home' ）
}
]
})
滚动行为-----刷新记录鼠标位置：
路由配置：
scrollBehavior(to,from,savePosition){
<!--点击浏览器 前进、后退或者切换导航时调用：
to:目标路由对象，去哪里
from：离开的路由对象，从哪里来
savePosition:记录滚动条坐标（点击前进后退时）-->
if (savePosition) {
return savePosition
}else{
return {
x:0,
y:0
}
}
<!--也可以用hash设置-->
HTML：
导航：<router-link :to="{path:'/documents#abc'}">documents</router-link>
document.vue: <p id='abc'>定位到这个元素</p>
if (to.hash) { //也在scrollBehavior函数里面
return {
selector: to.hash
}
}
点击标签的各种方式：
//点击标签的各种方式：
<li> //动态绑定
<router-link :to='index' tag='div'>home</router-link>
</li>
<li> //json模式
<router-link :to="{path:'/documents'}">documents</router-link>
</li>
<li>//直接指定路径
<router-link to='/about'>about</router-link>
</li>
<li>
<router-link to='/user'>用户信息</router-link>
</li> //tag 可以指定生成li标签
<router-link :to='index' tag='li'>
<i></i>
<span>这是span</span>
</router-link>
激活的导航有一个class：router-link-active,
或者自定义类名：
全部配置：路由里面配置：router-link-active：'isActive' //约定名称
行间设置： <router-link active-class='activeClass'></router-link>
配置事件(鼠标移入切换)：<router-link event='mouseover'></router-link>
严格模式：<router-link exact='true'></router-link>
重定向和别名：
{
path: '*',
component: s404 //渲染404组件
//重定向，指向home：redirect: '/home'
//动态指定：
/** redirect:(to)=>{ //动态设置重定向的目标
//目标路由对象，就是访问的路径的路由信息
* if(to.path==='/123'){
* return '/home'
* }else{
* return {name:'about'}
* }
*/
}
嵌套路由：
about.vue:
<router-link to='about' tag='li'> <a>study</a></router-link> <!--设置默认子路由-->
<router-link to='about/word' tag='li'><a> work</a></router-link>
<router-link :to={name:'word'}' tag='li'><a> work</a></router-link><!--可以设置name-->
<!--渲染区域-->
<router-view></router-view>
路由设置：
{
path: '/about',
component: About,
children:[ //设置子路由
{
path: 'study', //相对于根路径
component: study
},
{
path: '',//设置默认子路由
component: word
},
/* {
path: '/study',//加上'/' 路径相当于根路径
component: word
}*/
]
}
设置子路由，不要给父路由设置name
命名试图(一个页面需要两个组件视图)：
HTML:
app.vue:
<router-view name='slider'></router-view><!--给视图起个名字-->
<router-view></router-view>
路由：
{
path: '/document',
name: 'Document',
components:{
default: document //默认组件
slider: slider //name为slider的组件
}
}
动态路径：
匹配到的所有路由，全部映射到同一个组件上的时候，例如个人信息
路径：/user/:userId userId 为动态路径参数
导航：<router-link to='user' tag='li'><a> work</a></router-link>
user.vue:
<router-link
to=" '/user/' +item.type+'/'+item.id"
key='index'
v-for='item,index in userList'
tag='li'
>{{item.id}}</router-link>
<script>
var list=[
{ id:1,name:'hh',age:'27',type:'vip'}
{ id:2,name:'xx',age:'18',type:'pt'}
]
export default {
data(){
return{
userList=list,
userInfo={}
}
},
created(){ 声明周期函数
<!--渲染组件会调用一次生命周期函数，复用组件不会调用
地址一旦变化，会重新生成一个$route-->
this.$route //route实例对象（路由信息对象），表示当前激活的路由的状态信息
this.$route.params就是userId
let id=this.$route.params.userId
this.userInfo=this.userList.filter((item)=>{ return item.id=id})[0]
},
watch:{ //监控数据变化
$route(){
let id=this.$route.params.userId
this.userInfo=this.userList.filter((item)=>{ return item.id=id})[0]
}
}
}
</script>
<!--
router实例:
this.$route.path 字符串，当前路由的路径
this.$route.params 字符串，动态路由参数
this.$route.query 字符串，URL查询字符串（？号后面的内容）
this.$route.hash 字符串，当前路由的hash值
-->
路由：
{
path: '/user/ :type ?/ :userId? ',
<!--userId随便起的,?号表示能出现userId，那你也可以不出现userId-->
component: user
}
查询字符串：
方式一、<router-link to="?info='fenxiang' " exact ></router-link> //exact=精确匹配
方式二、<router-link v-bind:to="{path:'',query:{info:'follow',a:'1'} }" exact >
</router-link> //exact=精确匹配
--------------------------------------------------------
this.$route.query拿到值
过渡动画：
HTML:
<transition mode='out-in'> //设置name可以自定义v-enter中 v的名称
<router-view></router-view>
</transition>
style样式：
v-enter:进入过度的开始状态 (变化类型：opacity:0)
v-enter-active:进入活动状态,（时间：transition:2s）
v-enter-to:进入的结束状态 (变化类型：opacity:1)
v-leave:离开过度的开始状态 (变化类型：opacity:1)
v-leave-active:离开活动状态 （时间：transition:2s）
v-leave-to:离开的结束状态 (变化类型：opacity:0)
编程式导航
编程式导航：
1、后退：this.$router.back()
2、前进：this.$router.forward()
3、指定前进或者后退的步数：this.$srouter.go()
4、this.$router.push()导航到不同的URL，向历史纪录中添加一条
this.$router.push('/document')
this.$router.push({path:'/document',query:{ } })
5、this.$router.replace() 导航到不同的URl，替换历史纪录中的记录abcsefghijklmnopqrst
钩子函数
钩子函数：
可以书写的位置：
1、全局路由
2、单个路由
3、组件中
-----------------------------
路由：{
path: '/document',
meta: {
login:true,
title:1123
}
}
-----------------------------
全局router实例：
router.beforeEach:进入路之前
router.beforeEach((to,from,next)=>{
if(to.meta.login){ //需要登陆
next('/loding')进入导航
}
next()进入导航
})
------------------------------
router.afterEach：进入路由之后
router.afterEach((to,from)=>{
if(to.meta.title){ //title存在
window.document.title=to.meta.title
}else{
window.document.title='哈哈'
}
})
----------------------------
单个路由中：beforeEach 进入路由
路由中：{
beforeEach(to,from,next){
next()
}
}
---------------------------------
组件内：beforeRouteEnter 进入组件\beforeRouteUpdate 更新组件\beforeRouteLeave离开组件
router.beforeEach(to,from,next){
next(false)取消导航
beforeCreate(){}//组件进入后的第一个生命周期函数
export default {
beforeRouteEnter(to,from,next){
next((vm)=>{
vm.text(data数据)=' 123 '
})
}
}
