vue-router基础知识点-优快云博客

本文深入讲解Vue Router的核心概念，包括动态路由、嵌套路由、命名路由、命名视图及编程式导航等，辅以实例代码，助您掌握Vue路由管理技巧。

本文章主要是整理vue-router中基本的一些概念，以及代码配置，水平有限，文章中可能会出现一些问题，欢迎指正
复制代码

路由配置

动态路由：动态路由主要实现组件的复用性，通过不同的子路由实现访问不同页面。代码如下
```
  //router.js
   {
  //  路由的匹配
  path: '/argu/:name',
  name: 'argu',
  component: () => import('@/views/argu.vue'),
  props: true
},
复制代码
```
获取路由名称时我们经常使用 $route.params.name 去获取匹配的路由名

和我们平时写的没什么不同，只是我们平时都是在一个页面转入不同的值去重新渲染页面，而匹配路由则是组件复用，且利用路由讲述我们是在不同的页面。

嵌套路由

在写页面的时候我们经常会将页面封装成几个组件，并在父组件中去拼接他们，而嵌套路由也是一样，同样是拼接组件，不同的是他是根据路由去控制是否拼接组件。

官网示意图长这样

     /user/foo/profile                     /user/foo/posts
    +------------------+                  +-----------------+
    | User             |                  | User            |
    | +--------------+ |                  | +-------------+ |
    | | Profile      | |  +------------>  | | Posts       | |
    | |              | |                  | |             | |
    | +--------------+ |                  | +-------------+ |
    +------------------+                  +-----------------+
复制代码

代码配置：

//  路由的嵌套
path: '/parent',
name: 'parent',
component: () => import('@/views/parent.vue'),
children: [
  {
    path: 'child',
    name: 'child',
    component: () => import('@/views/child.vue')
  }
]
复制代码

子组件设置在children中，页面实例如下

命名路由

给路由起一个名字，当我们跳转页面的时候可以直接根据这个名字进行跳转

代码如下

path: '/login',
name: 'login',
component: () => import('@/views/login.vue')
复制代码

<router-link :to="{ name: 'login'}">Login</router-link>
复制代码

命名视图

用于同时（同级）展示多个视图的时候，例如这样的

左边是侧边栏右边是详情页代码示例

  <!-- 路由视图 实现在同一个页面加载不同的路由视图 -->
      <router-view key="default" />
      <router-view key="email" name="email" />
      <router-view key="tel" name="tel" />
复制代码

编程式导航

听着高大上，就是利用js来控制路由，经常使用的api有

router.push、 router.replace 、router.go

关于api我会和h5 history 单独的去整理

//字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
复制代码

重定向与别名

将/a的重定向到/b，当你访问路由a时跳转的是路由b

重定向

//  路由重定向
path: '/main',
// redirect: '/' 方法一
// 方法二利用命名路由
// redirect: {
//   name: 'home'
// }
// 方法三
// redirect: to => {
//   return {
//     name: 'home'
//   }
// }
// 方法四
redirect: to => '/'
复制代码

别名：你访问/home_page和访问/一样的效果

 path: '/',
// 路由的别名作用
alias: '/home_page',
复制代码