vue路由

目录

一、vue路由简介和基础使用

1、什么是路由

2、为何使用路由

3、如何在vue中使用路由（vue-router）

4、vue-router路由系统的使用

二、声明式导航

1、使用router-link来替代a标签

2、声明式导航-跳参传参

三、重定向和模式

1、路由-重定向

2、路由-404

3、路由-模式设置

四、编程式导航

1、基础使用

2、跳参传参

五、全局前置守卫

1、路由嵌套

2、全局前置守卫

---

一、vue路由简介和基础使用

1、什么是路由

    路由是一种映射关系，即路径跟组价的映射关系。

2、为何使用路由

单页面应用(SPA)：所有功能在一个html页面上实现

前端路由作用：实现业务场景切换

优点：

• 整体不刷新页面，用户体验更好
• 数据传递容易，开发效率高

缺点：

• 开发成本高（需要学习专门知识）
• 首次加载会比较慢一点，不利于seo

3、如何在vue中使用路由（vue-router）

vue-router本质是一个第三方包，想要在vue中实现路由，直接集成vue-router包即可

官网：https://router.vuejs.org/zh/

• 它和vue.js深度集成
• 可以定义-视图表（映射规则）
• 模块化的
• 提供2个内置全局组件
• 声明式导航自动激活的CSS class的链接
• ......

4、vue-router路由系统的使用

步骤：

• 下载vue-router模块到当前工程
• 在main.js中引入VueRouter函数
• 添加到Vue.use()身上 - 注册全局RouterLink和RouterView组件
• 创建路由规则数组 - 路径和组件名对应关系
• 用规则生成路由对象
• 把路由对象注入到new Vue实例中
• 用router-view作为挂载点，切换不同的路由页面

代码示例：

main.js

 App.vue

二、声明式导航

1、使用router-link来替代a标签

优点：router-link自带高亮的类名

• vue-router提供了一个全局组件router-link
• router-link实质上最终会渲染a链接，to属性等价于提供href属性（to无需#）
• router-link提供了声明式导航高亮的功能（自带类名）

代码示例：

2、声明式导航-跳参传参

作用：在跳转路由时，可以给路由对应的组件内传值

在router-link上的to属性传值，语法格式如下：

• /path?参数名=值

对应页面组件接收传递过来的值:

• $route.query.参数名

（1）第一种格式：

（2）第二种格式：$route.query.参数名

三、重定向和模式

1、路由-重定向

作用：网页第一次打开没有默认的页面，可以设置默认的访问路径，匹配path后，强制跳转path路径

• 网页打开url默认hash值是/路径
• redirect是设置要重定向到哪个路由路径

代码示例：

2、路由-404

作用：当访问的不存在的页面或者错误的路径时页面会显示404，可以通过path匹配

• 路由最后，path匹配*(任意路径) - 前面不匹配就命中最后这个

代码示例：

3、路由-模式设置

作用：修改路由在地址栏的模式

• hash路由例如：http://localhost:8080/#/home
• history路由例如：http://localhost:8080/home（以后上线需要服务器端支持，否则找的是文件夹）

代码示例：

四、编程式导航

1、基础使用

作用：用JS代码来进行跳转

语法：

• path或者name任选一个 

代码示例：

（1）第一种方式：path

 

 （2）第二种方式：name

2、跳参传参

作用：用JS代码跳转路由，传参

语法：query或者params任选一个

• params => $route.params.参数名
• query => $route.query.参数名

代码示例：

五、全局前置守卫

1、路由嵌套

作用：在现有的一级路由下，再嵌套二级路由

语法：在main.js中配置2级路由

• 一级路由由path从/开始定义
• 二级路由往后path直接写名字，无需/开头
• 嵌套路由在上级路由的children数组里编写路由信息对象

代码示例：

 注意点：

• 二级路由路径不需要/

2、全局前置守卫

 作用：路由跳转之前，会触发一个函数

• 例如：登陆状态去<我的音乐>页面，未登陆弹窗提示
• 语法：router.beforeEach((to, from, next) => {})

代码示例：