Vue-router常见用法

1.前端路由的概念与原理

1. 什么是路由:路由（英文：router）就是对应关系。
2. 什么是前端路由:Hash 地址与组件之间的对应关系。
3. 前端路由的工作方式
   结论：前端路由，指的是 Hash 地址与组件之间的对应关系！

2.vue-router 的基本用法

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。

2.1 创建路由模块

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：

2.2导入并挂载路由模块

在 src/main.js 入口文件中，导入并挂载路由模块。示例代码如下：

2.3声明路由链接和占位符

在 src/App.vue 组件中，使用 vue-router 提供的 和 声明路由链接和占位符：

2.4声明路由的匹配规则

在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则。示例代码：

3.动态路由

什么是动态路由？动态路由是指路由器能够自动的建立自己的路由表，并且能够根据实际情况的变化实时地进行调整。

在vue项目中，使用vue-router如果进行不传递参数的路由模式，则称为静态路由；如果能够传递参数，对应的路由数量是不确定的，此时的路由称为动态路由。动态路由，是以冒号为开头的:，例子如下：

4.vue-router 的常见用法

3.1路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

routes: [
    { path: '/', redirect: '/login' },
    // 登录的路由规则
    { path: '/login', component: Login }
]

3.2嵌套路由

通过 children 属性声明子路由规则:

3.1路由重定向

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。 在 vue-router 中使用英文的冒号（:）来定义路由的参数项。示例代码如下：

在动态路由渲染出来的组件中，可以使用 this.$route.params 对象访问到动态匹配的参数值。

使用 props 接收路由参数:
为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参。示例代码如下：