vue-router路由

Posted 2020-12-28 wilsunson

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();
}