vue路由对于单页应用很有用,但是小程序不支持,所以mpvue框架不支持。
vue-router是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。
引入 Hi组件:我们在router/index.js文件的上边引入Hi组件
import Hi from '@/components/Hi'
增加路由配置:在router/index.js文件的routes[]数组中,新增加一个对象,代码如下。
{ path:'/hi',
name:'Hi',
component:Hi
}
<router-link>标签: <router-link to="/">[显示字段]</router-link>
to:是我们的导航路径,要填写的是你在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成 to=”/” ,
[显示字段] :就是我们要显示给用户的导航名称,比如首页 新闻页。
<router-link> 标签中的to传参
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
1
<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>
这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.
name:就是我们在路由配置文件中起的name值。
params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。
在模板里(src/components/Hi1.vue)用$route.params.username进行接收.
vue-router配置子路由
把Hi.vue改成一个通用的模板,加入<router-view>标签,给子模板提供插入位置。
子路由的写法是在原有的路由配置下加入children字段
children:[
{path:'/',component:xxx},
{path:'xx',component:Hi1},
]需要注意的是,在配置路由文件前,需要先用import引入Hi1和Hi2。
单页面多路由区域操作
在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立了新的项目,并打开了src目录下的App.vue文件,
在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。
<router-view ></router-view>
<router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
<router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>
index.js里面:
export default new Router({
routes: [
{
path: '/',
components: {
default:Hello,
left:Hi1,
right:Hi2
}
}
<transition>标签
想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性。
<transition name="fade">
<router-view ></router-view>
</transition>
<transition name="fade">
<router-view ></router-view>
</transition>
css过渡类名:
组件过渡过程中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,比如name=”fade”,会有如下四个CSS类名:
fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。
从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,
所以CSS的transition属性在这两个类下进行设置。
.fade-enter {
opacity:0;
}
.fade-leave{
opacity:1;
}
.fade-enter-active{
transition:opacity .5s;
}
.fade-leave-active{
opacity:0;
transition:opacity .5s;
}
过渡模式mode:
in-out:新元素先进入过渡,完成之后当前元素过渡离开。
out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。
路由配置文件中的钩子函数
路由配置文件(/src/router/index.js)中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,
{path:'/params/:newsId(\\d+)/:newsTitle',
component:Params,
beforeEnter:(to,from,next)=>{
next();}
三个参数:
to:路由将要跳转的路径信息,信息是包含在对像里边的。
from:路径跳转前的路径信息,也是一个对象的形式。
next:路由的控制参数,常用的有next(true)和next(false)。
写在模板中就可以有两个钩子函数可以使用:
beforeRouteEnter:在路由进入前的钩子函数。
beforeRouteLeave:在路由离开前的钩子函数。
beforeRouteEnter:(to,from,next)=>{
console.log("准备进入路由模板");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("准备离开路由模板");
next();
}