前端(vue)学习笔记(CLASS 6):路由进阶

1、路由的封装抽离

将之前写在main.js文件中的路由配置与规则抽离出来,放置在router/index.js文件中,再将其导入回main.js文件中,即可实现路由的封装抽离

例如

javascript 复制代码
//index.js
import { createMemoryHistory, createRouter } from 'vue-router'

import HisPage from '../views/HisPage.vue'
import MyPage from '../views/MyPage.vue'

const routes = [
  { path: '/his', component: HisPage },
  { path: '/my', component: MyPage },
]

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

export default router

在main.js内部引入

javascript 复制代码
import router from './router/index.js'

同样在vue对象中进行注入即可

2、声明式导航-导航链接

Vue-router提供了一个全局组件router-link(取代a标签)

属性变成to,且无需#

1、能跳转,配置to属性指定路径(必须)。本质还是a标签,to无需#

2、能高亮,默认就会提供高亮类名,可以直接设置高亮样式

* 两个类名

说明:router-link自动给当前导航添加了两个高亮类名

1、router-link-active 模糊匹配(用的多)

to="/my" 可以匹配 /my /my/a /my/b ...

2、router-link-exact-active 精确匹配

to="/my" 仅可以匹配 /my

说明:router-link的两个高亮类名太长了

在router的配置项中加上

javascript 复制代码
linkActiveClass:"类名1"
linkExactActiveClass:"类名2"

可以通过配置项定制类名

* 跳转传参

在跳转路由时,进行传值

1、查询参数传参

语法格式如下

to="/path?参数名=值[&参数名=值]

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

$route.query.参数名

2、动态路由传参

配置动态路由

javascript 复制代码
router: [
    ...,
    {
      path: '/.../:参数名',
      component: ...
    }
]

配置导航链接

to="/path/参数值"

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

$route.params.参数名

注:/path/:参数名表示,必须要传参数。如果不传参数也希望匹配,可以加个可选符"?"

* vue路由-重定向

问题:网页打开,url默认是/路径,未匹配到组件时,会出现空白

说明:重定向 -> 匹配path后,强制跳转path路径

语法: {path: 匹配路径,redirect: 重定向的路径}

* vue路由-404

作用:当路径找不到匹配时,给个提示页面

位置:配在路由最后

语法:path:"*"(任意路径)-前面不匹配就命中最后这个

* vue路由-模式设置

问题:路由的路径看起来不自然,有#,能否切成真正路径形式

hash路由(默认) 例如:http://localhost:8080/#/home

history路由(常用) 例如:http://localhost:8080/home(以后上线需要服务器端支持)

javascript 复制代码
const router = new VueRouter({
    routes,
    mode: "history"
})

3、编程式导航-基本跳转

问题:点击按钮跳转如何实现

编程式导航:用js代码来进行跳转

两种语法:

1、path路径跳转(简易方便)
javascript 复制代码
this.$router.push('路由路径')

this.$router.push({
    path:'路由路径'
})
2、name命令路由跳转(适合path路径长的场景)
javascript 复制代码
this.$router.push({
    name: '路由名'
})
javascript 复制代码
{name: '路由名', path: '/path', component: XXX}
* 编程式导航-路由传参

问题:点击搜索按钮时,跳转需要传参如何实现

1、path路径跳转传参(query传参)
javascript 复制代码
this.$router.push('/路径?参数名1=参数值1&参数名2=参数值2)

this.$router.push({
    path:'/路径',
    query: {
        参数名1: '参数值1',
        参数名2: '参数值2'
    }
})

并且使用$route.query.参数名进行获取

2、path路径跳转传参(动态路由传参)
javascript 复制代码
this.$router.push('/路径/参数值')

this.$router.push({
    path: '/路径/参数值'
})
3、name命名路由跳转传参(query传参)
javascript 复制代码
this.$router.push({
    name:'路由名字',
    query: {
        参数名1: '参数值1',
        参数名2: '参数值2'
    }
})
4、name命名路由跳转传参(动态路由传参)
javascript 复制代码
this.$router.push({
    name:'路由名字',
    params: {
        参数名1: '参数值1',
        参数名2: '参数值2'
    }
})

同样理由$route.params.参数名进行获取

相关推荐
沧海一笑-dj1 分钟前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
行云&流水7 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐14 分钟前
零基础学HTML和CSS:网页设计入门
前端·css
老虎062722 分钟前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿1213836 分钟前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴1 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack1 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669131 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
大苏打seven1 小时前
Docker学习笔记:Docker网络
笔记·学习·docker
尘心cx1 小时前
前端-CSS-day1
前端·css