Vue学习笔记 —— vue-router

最新推荐文章于 2024-07-25 15:43:31 发布

莫非C

最新推荐文章于 2024-07-25 15:43:31 发布

阅读量293

点赞数

分类专栏： Vue.js学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_43340295/article/details/109202841

版权

本文介绍了Vue路由的核心概念和使用方法，包括路由的概念、为什么使用Vue Router、安装步骤。接着详细讲解了重定向、别名、根路径、命名路由、命名视图和动态路由的配置与应用，强调了它们在实际项目中的作用和注意事项，帮助开发者更好地理解和掌握Vue的导航管理。

摘要由CSDN通过智能技术生成

路由的概念

路由的本质是一种个对应关系，比如说在URL中输入要访问的url地址之后，浏览器要去请求这个地址对应的资源。

为什么要使用路由？

vue单文件应用，所以一般a标签跳转不再使用。这个时候我们需要借助vue-router插件来实现Vue组件之间的跳转。

vue-router安装

cnpm install vue-router --save
npm install vue-router --save

1、重定向

重定向通过 routes 配置来完成，重定向的目标可以是路径，已命名的路由，或者是一个方法

const router = new Router({
   
  routes: [
    {
    path: '/a', redirect: '/b' }
  ]
}

const router = new Router({
   
  routes: [
    //一个命名的路由
    {
    path: '/a', redirect: {
    name: 'c' }}   
  ]
}

const router = new Router({
   
  routes: [
    //一个方法，动态返回
     {
    path: '/a', redirect: to => {
   
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
      return '/home'
    }}   
  ]
}