vue-router笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-router笔记相关的知识,希望对你有一定的参考价值。


http://router.vuejs.org/zh-cn/index.html 
做导航

<router-link :to="{path:‘/Chinder‘}">子页面</router-link>

显示页面相关信息
<router-view></router-view>

子路由
<router-link :to="{path:‘/Chinder‘}">子页面</router-link>
<router-link :to="{path:‘/Chinder/Chinder1‘}">子页面1</router-link>
<router-link :to="{path:‘/Chinder/Chinder2‘}">子页面2</router-link>
在Chinder(父组件中)
添加<router-view></router-view>
在路由.js中
导入想要跳转的页面,如下
import Chinders from ‘@/components/chinder‘
import Chinders1 from ‘@/components/chinder1‘
import Chinders2 from ‘@/components/chinder2‘
配置相关的路由
{
path:‘/chinder‘,
name:‘chinder‘,
component:Chinders,
//这上面它是父组件
//这下面是子组件
children:[
{
path:‘chinder1‘,
component:Chinders1,
},
{
path:‘chinder2‘,
component:Chinders2,
},
]
}

vue-router如何参数传递
1:name:‘xxx‘
这边的配置要在
routes: [
{
path: ‘/‘,
name: ‘Hello‘,
component: Hello
},
在想要的.vue文件中调用这个数据,如下
如c.vue中,要对应上面配置的路由
<p>
{{$route.name}}
</p>
2:<router-link> 标签中的to传参
首先先在路由中把name的名字写好
children:[
{
path:‘chinder1‘,
name:‘c1‘,
component:Chinders1,
},
{
path:‘chinder2‘,
name:‘c2‘,
component:Chinders2,
},
]
接着到
这边的name必须和路由中的名字一样
<router-link :to="{path:‘/Chinder/Chinder1‘,name:‘c1‘,params:{username:‘abc‘,id:‘12345‘}}">子页面1</router-link>
最后把想显示的数据在对应的如c.vue中显示出来
如下
<p>
{{$route.name}}
</p>这个可以不存在
<p>
这边的参数,必须在:to里面配置过的
{{$route.params.username}}
{{$route.params.id}}
</p>

单页面多路由区域操作
<router-view></router-view>
<router-view name="left" id="left"></router-view>
<router-view name="right" id="right"></router-view>
在路由中改变下如下
{
path: ‘/‘,
name: ‘Hello‘,
components:{
default:Hello,
left:L1,
right:R1
}
},
L1,R1是对应的组件
当如果要修改对应的位置时.
{
path: ‘/abc‘,
name: ‘Hello‘,
components:{
default:Hello,
left:R1,
right:L1
}
},

vue-router 利用url传递参数
<router-link :to="{path:‘/parnetC/198/jspang website is very good‘}">带有参数的</router-link>
路由.js
{
path:‘/parnetC/:news(\\d+)/:titles‘,
component:parnetC,
},
()中的是正则规则

vue-router 的重定向-redirect
重定向
<router-link to="/goHome">回首页</router-link>

{
path:‘/goHome‘,
redirect:‘/‘
}
如果有参数的时候
<router-link to="/parnetC/145/不错的呀">去其他地方</router-link>
{
path:‘/goparnetC‘,
redirect:‘/parnetC/:news(\\d+)/:titles‘
},
alias别名的使用
:别名请不要用在path为’/’中,如下代码的别名是不起作用的。
<router-link to="/Cs1">alias</router-link>
{
path:‘chinder1‘,
name:‘c1‘,
component:Chinders1,
alias:‘/Cs1‘
},
路由的过渡动画
<transition name="fade" mode="out-in">
<router-view></router-view>
<router-view name="left" id="left"></router-view>
<router-view name="right" id="right"></router-view>
</transition>
css
.fade-enter{
opacity:0
}
.fade-enter-active{
transition: opacity 0.5s;
}
.fade-leave{
opacity:1;
}
.fade-leave-active{
opacity:0;
transition:opacity 0.5s;
}
fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。
过渡模式mode:
in-out:新元素先进入过渡,完成之后当前元素过渡离开。
out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。

mode的设置和404页面的处理
mode:
histroy:当你使用 history 模式时,URL 就像正常的 url,例如 http://jsapng.com/lms/,也好看!
hash:默认’hash’值,但是hash看起来就像无意义的字符排列,不太好看也不符合我们一般的网址浏览习惯。

404
<router-link to="/123">404页面</router-link>
{
path:‘*‘,
component:Error404
},

路由中的钩子
第一种:在路由index.js中写,但只能写一个
{
path:‘/parnetC/:news(\\d+)/:titles‘,
component:parnetC,
beforeEnter:(to,from,next)=>{
console.log(to)
console.log(from)
next()
}

},
to:路由将要跳转的路径信息,信息是包含在对像里边的。
from:路径跳转前的路径信息,也是一个对象的形式。
next:路由的控制参数,常用的有next(true)和next(false)。
next(true|false|{})这3种用法
第二种,在模板中写
beforeRouteEnter:(to,from,next)=>{
console.log(‘进入中‘)
next()
},
beforeRouteLeave:(to,from,next)=>{
console.log(‘离开了‘)
next()
}

编程式导航
业务逻辑代码
hou(){
alert(‘退后了‘);
this.$router.go(-1)
},
qian(){
alert(‘向前了‘);
this.$router.go(1)
},
push(){

this.$router.push(‘/‘);
}
this.$router.push({path: ‘/login‘, query:{stage: stage}});

以上是关于vue-router笔记的主要内容,如果未能解决你的问题,请参考以下文章

Vue2.0笔记——vue-router路由

vue-router 笔记

vue-router学习笔记

vue-router路由 学习笔记

Vue 学习总结笔记

vue-router笔记