今天来聊一聊 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
- }
- }
- })
来源: http://www.jianshu.com/p/5d159d7773f7