1.前言
上篇文章说了vue-router的基本使用,接下来看下其他的使用方法
2.路由的重定向
还是拿之前的例子,有3个页面(home,about,help)
如果都没有匹配上,那怎么办?我可以让它重定向home页面,这里重定向有多种写法,还是修改router中index.js。
2.1字符串重定向
redirect后面接的是一个path字符串
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/help',
name: 'help',
component: Help
},
{
path: '*',
redirect: '/home' //重定向到'/home'
}
]
})
2.2对象重定向
redirect后面接的是一个包含path的对象或者name的对象
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/help',
name: 'help',
component: Help
},
{
path: '*',
// redirect: {path: "/home"} 两种写法都可以
redirect: {name: "home"}
}
]
})
这里有两种写法,一种是包含path的对象,一种是包含name的对象,之前上篇文章提到过这个name,name就是路由的名称,其实就告诉路由匹配到name为home的路由!
2.3函数重定向
动态设置重定向目标
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/help',
name: 'help',
component: Help
},
{
path: '*',
// redirect: {path: "/home"} 两种写法都可以
redirect: {name: "home"}
}
]
})
输入'http://localhost:8080/123'来打印看下to这个对象如下:
这里可以看到fullPath,hash,params,path,query,这里我们可以用path来做个判断,其他的属性以后会说到(先不用去理解)!
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/help',
name: 'help',
component: Help
},
{
path: '*',
redirect: (to) => {
if (to.path === '/123') {
return '/home'
} else if (to.path === '/456') {
return {path: '/about'}
} else {
return {name: 'help'}
}
}
}
]
})
看下面执行结果:
3.路由的别名
就是给路由设置一个另外的名字,比如输入'http://localhost:8080/123',我还想跳到help这个页面,就可以把help路由设置一个别名叫做'/123'!
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/help',
name: 'help',
alias: "/123",
component: Help
}
]
})
看下图,输入'http://localhost:8080/123'直接跳转到help路由
4.设置全局和局部激活class
当点击路由切换的后,可以看到当前激活的路由会有个激活的'router-link-active' class类名,你可以为激活的路由设置样式,如果你不想用这个类名,想自己设置个自己喜欢的类名也是可以的,只需要在路由配置里面设置linkActiveClass属性,下面我把它设置为'active'
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
linkActiveClass: "active",
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/help',
name: 'help',
alias: "/123",
component: Help
}
]
})
再来设置样式,当激活时背景色为黄色!
如果不想每个颜色都一样,也可以为每个路由单独设置局部'active-class'类名,about被激活设置粉色,help被激活设置天蓝色,修改App.vue如下
<template>
<div class="router-class">
<router-link to="/home">home页面</router-link>
<router-link to="/about" active-class="about-router">about页面</router-link>
<router-link to="/help" active-class="help-router">help页面</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style>
.active{
background-color: yellow;
}
.about-router{
background-color: pink;
}
.help-router{
background-color: skyblue;
}
</style>
5.路由嵌套
先对之前的路由做下修改,在根目录下就展示home路由,并且是激活状态,那么这里就需要修改下路由配置,
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
linkActiveClass: "active",
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/help',
name: 'help',
alias: "/123",
component: Help
}
]
})
router-link里面也需要把path的路径改成根路径!
<template>
<div class="router-class">
<router-link to="/" >home页面</router-link>
<router-link to="/about" active-class="about-router" >about页面</router-link>
<router-link to="/help" active-class="help-router">help页面</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style>
.active{
background-color: yellow;
}
.about-router{
background-color: pink;
}
.help-router{
background-color: skyblue;
}
</style>
看下执行效果!
发现样式有问题,home的激活状态不会消失,为啥?是因为path匹配的是'/'根目录,那么它也会匹配到'/about','/help',所以需要准确匹配,需要加上一个exact属性
<template>
<div class="router-class">
<router-link to="/" exact>home页面</router-link>
<router-link to="/about" active-class="about-router" >about页面</router-link>
<router-link to="/help" active-class="help-router">help页面</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style>
.active{
background-color: yellow;
}
.about-router{
background-color: pink;
}
.help-router{
background-color: skyblue;
}
</style>
接下来我们在about路由下在嵌套3个路由,分别是work页面,company页面,contactUs页面,并且在父路由about下面 work页面是激活状态,看下面效果!
那么首先我们需要创建3个组件,并且通过path匹配,因为是about的子路由,所以需要在about路由创建子路由,并且子路由的path不需要加上'/',加上的话就匹配根路径了!
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'
import Work from '@/components/Work'
import Company from '@/components/Company'
import ContactUs from '@/components/ContactUs'
Vue.use(Router)
export default new Router({
linkActiveClass: "active",
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About,
children: [
{
path: '',
name: 'Work',
component: Work
},
{
path: 'company',
name: 'company',
component: Company
},
{
path: 'contactUs',
name: 'contactUs',
component: ContactUs
}
]
},
{
path: '/help',
name: 'help',
alias: "/123",
component: Help
}
]
})
修改了路由配置,还要修改下about.vue的router-link的路径,这里和上面一样也需要准确匹配!还需要添加 < router-view > ,因为它是组件渲染的占位符!
<template>
<div>
<p>about</p>
<router-link to="/about" exact>work页面</router-link>
<router-link to="/about/company" >company页面</router-link>
<router-link to="/about/contactUs" >contactUs页面</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "About"
}
6.命名路由
其实上面路由的重定向有提到过路由的命名,其实就是在 routes 配置中给某个路由设置名称,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。比如上面的< router-link >里面是提供完整的path,也可以直接用命名路由来代替,看下面代码
<template>
<div>
<p>about</p>
<router-link :to="{name:'work'}" exact>work页面</router-link>
<router-link :to="{name:'company'}">company页面</router-link>
<router-link :to="{name:'contactUs'}">contactUs页面</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "About"
}
通过绑定命名路由也可以达到一样的效果!