【Vue】Vue中使用vue-router的妙用详解

CrazyPanda发表于：2024-04-29 23:57:02浏览：292次TAG：

vue是当前最热门的前端框架之一，它不仅简洁易用，而且具有强大的扩展性，其中一个值得关注的插件就是vue-router。vue-router是vue官方路由插件，它可以更好地控制vue应用中的路由导航，使路由与组件之间的关系更加清晰，提升了用户的交互体验。本文将详细解读vue-router的使用方法及妙用。

一、安装和使用

在使用vue-router之前，需要先安装它。可以使用npm包管理器来安装vue-router插件。安装命令如下：

npm install vue-router

安装完成之后，在main.js文件中引入并使用vue-router：

import VueRouter from 'vue-router'
import routes from './router'
 
const router = new VueRouter({
      routes
})
 
new Vue({
      el: '#app',
      router,
      render: h => h(App)
})

其中，routes参数指定路由配置，可以根据项目需要进行修改。然后在Vue实例化对象中传入router参数，启用路由功能。

二、基础配置

路由配置包含路由表和路由组件两个部分。路由表主要用于配置路由路径和相应的组件，路由组件是对应路由路径的组件视图。

在src目录下创建router.js文件，定义路由表和组件。如下：

import Home from './views/Home.vue'
import About from './views/About.vue'
 
export default [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        component: About
    }
]

登录后复制

然后在main.js中引入路由配置，并传入VueRouter实例中。其中，路由路径使用path属性进行配置，component属性指定对应的路由组件。

三、参数传递

Vue-router还支持传递参数，可以通过$route对象获取到传递的参数。

路径传参

路径传参是指将参数放在路由路径的一部分，例如：

{
  path: '/user/:userId',
  name: 'user',
  component: User
}

当用户访问/user/1时，路由会将1作为参数userId传递给User组件。

查询参数传参

查询参数传参是指将参数以键值对的形式放在路由路径后，以问号?分隔，连续的键值对用&连接，例如：

{
  path: '/user',
  name: 'user',
  component: User
}

当用户访问/user?id=1&name=john时，路由会将{id: 1, name: 'john'}作为查询参数传递给User组件。

四、重定向和嵌套路由

重定向

重定向是指将用户在浏览器中访问某个路径时，自动跳转到另一个路径。如下代码实现了路径/about自动跳转到路径/home的功能：

import Home from './views/Home.vue'
import About from './views/About.vue'
 
export default [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    redirect: '/home'
  }
]

嵌套路由

嵌套路由是指在父组件中使用子组件的路由。例如，在头部和底部为固定结构的页面中，需要嵌套“内容”组件，三层结构看起来是这样的：

header
 /
L   R
    |
content
    |
footer

嵌套路由需要在父组件内部使用标签来占位，并在父组件的路由表内部定义子路由表。例如：

const home = {
  template: `
    <div>
      <h2>Home</h2>
      <router-view></router-view>
    </div>
  `
}
 
const about = {
  template: '<div>About</div>'
}
 
const contact = {
  template: '<div>Contact</div>'
}
 
const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
      children: [
        {
          path: 'about',
          name: 'about',
          component: about
        },
        {
          path: 'contact',
          name: 'contact',
          component: contact
        }
      ]
    }
  ]
})

在home组件中使用了标签作为子组件“about”和“content”的占位符。在路由表中，父组件“home”配置的子路由表中包含了“about”和“content”两个子路由路径。

五、路由守卫

全局守卫

全局守卫会在路由切换前触发，其中beforeEach()为全局前置守卫，可以进行权限验证、登陆验证等操作。

router.beforeEach((to, from, next) => {
  // 验证用户是否登陆
  if(to.path === '/login') {
    next();
  } else {
    let token = localStorage.getItem('token');
 
    if(token === null || token === '') {
      next('/login');
    } else {
      next();
    }
  }
})

全局后置守卫用于路由切换后触发，用于处理页面加载的进度条等操作。

路由独享守卫

路由独享守卫用于针对某个路由做出特定的处理，在路由配置中添加beforeEnter属性定义即可。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      name: 'admin',
      component: admin,
      beforeEnter: (to, from, next) => {
        // 验证是否为管理员账户
        let token = localStorage.getItem('token');
        if(token === 'admin') {
          next();
        } else {
          next('/');
        }
      }
    }
  ]
})

组件内守卫

组件内守卫主要用于对当前组件进行处理。包括：beforeRouteEnter，beforeRouteUpdate和beforeRouteLeave三个守卫函数。

beforeRouteEnter函数在组件进入之前触发，在该函数中无法直接访问组件实例，但可以通过next回调函数传递组件实例进行处理。

export default {
  data () {
    return {
      user: {}
    }
  },
  beforeRouteEnter (to, from, next) {
    axios.get(`/api/user/${to.params.id}`).then(response => {
      next(vm => vm.setUser(response.data.user))
    })
  },
  methods: {
    setUser (user) {
      this.user = user
    }
  }
}

beforeRouteUpdate函数由于组件之间的路由跳转不会重新创建实例，因此需要使用beforeRouteUpdate函数进行处理。

export default {
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  },
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

beforeRouteLeave函数在组件即将被离开时触发，用于处理未保存的表单数据等操作。

export default {
  beforeRouteLeave (to, from, next) {
    // 如果表单已保存或者页面没有修改，直接离开该页面
    if (this.saved || window.confirm('尚未保存，确定要离开吗？')) {
      next()
    } else {
      next(false)
    }
  }
}

六、总结

使用vue-router插件可以为Vue应用中的路由导航提供强大的控制能力，从而提升用户的交互体验。本文介绍了vue-router的基础配置、参数传递、重定向和嵌套路由及路由守卫等功能，可以帮助开发者更好地使用vue-router插件。