今天来聊一聊vue-router。
我们先来看一个最基本的配置。
// 创建一个路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
// 使用一个路由
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
最后再通过<router-view/>组件来渲染路由。
但是通常我们会给<router-view/>加一个transition转场动画。
接下来说几个router的配置
mode: 'history'
路由默认采用的形式是哈希路由，也就是url后面会加#/，可把mode设为history，就是我们平常所看到的网页的那种形式。
linkActiveClass，linkExactActiveClass
我们在页面上用router-link做跳转的时候，实际上是vue封装的一个a标签，当点击，以及路由匹配的时候，会给a标签加上特殊的class，我们可以通过linkActiveClass，linkExactActiveClass这两个属性做一些全局的配置。（有时候会用到，但是并不常见）
scrollBehavior
路由跳转时页面要不要滚动。(在一些特殊情况下，会用到)
scrollBehavior(to, from, savePosition) {
if (savePosition) {
return savedPosition
} else {
return { x: 0, y:0}
}
}
fallback
如果有的浏览器不支持history模式，会自动变成哈希的模式（fallback: true）
meta
meta有两个作用，一个是seo，比如设置titile之类的信息，还有一个作用是权限的校验，这个在后面路由守卫再讲。
下面说说routes数组里面的配置
path: 路劲，可配置动态路劲，比如path: '/user/:id'
name: 路由的名字
我们路由跳转的时候，有两种方式。
// 通过router-link组件
<router-link to="test">to test</router-link>
// 手动跳转
this.$router.push('/test')
上面是通过path路劲来跳转的，其实我们也可以通过name来跳转
// 通过router-link组件
<router-link :to="{name: 'test'}">to test</router-link>
// 手动跳转
this.$router.push({name: 'test'})
而且，如果我们需要动态的给路由传递一些参数，就只能通过name来跳转。
this.$router.push({name:'test', query: { id: '1'}})
this.$router.push({name:'test', param: { id: '1'}})
query和param的区别，其实类似于get和post的区别，前者参数会显示在url上，后者不会。
我们也可以给路由的传参做一些限定
比如设置props属性（props: { default: true, sidebar: false }）
component组件，这里我们可以通过懒加载的方式引入，比如用require.ensure的方式或者import的方式。
再来说一说路由守卫。
顾名思义，路由守卫就是在我们路由跳转或者解析之前，以及之后做的一个钩子函数，我们可以通过路由守卫来做一些控制。
路由守卫有前置守卫，解析守卫，后置钩子，但我们一般用的比较多的是前置守卫，以及解析守卫。
举个例子：
比方说，我们现在有10个路由，其中有些需要校验用户是否登录，如果已登录则可以直接访问，如果未登录则跳转到登录页面，有些无需校验则可以直接访问。
常见的一种做法是
我们给路由设置meta信息
meta: {
checkLogin: ture
}
然后设置全局的前置守卫，然后再里面去判断用户是否登录
router.beforeEach((to, from, next) => {
if (to.meta.checkLogin) {
// 查看是否有userData
if (store.state.userData) {
// 重新获取个人信息
axios.defaults.headers.common['accesstoken'] = store.state.accessToken;
// 重新更新个人信息
axios.post('/api/person/info', {})
.then((res) => {
// console.log(JSON.stringify(res.data.data))
if (res.data.code == 20000) {
store.commit('SET_USERDATA', res.data.data)
}
})
.catch((err) => {
console.log(err);
})
next()
} else {
next({
path: '/',
query: {
redirect: to.fullPath
}
})
}
} else {
next({
path: '/',
query: {
redirect: to.fullPath
}
}
})
网友评论