前端（vue）学习笔记（CLASS 6）：路由进阶-EW帮帮网

1、路由的封装抽离

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

例如

//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内部引入

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的配置项中加上

linkActiveClass:"类名1"
linkExactActiveClass:"类名2"

可以通过配置项定制类名

* 跳转传参

在跳转路由时，进行传值

1、查询参数传参

语法格式如下

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

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

$route.query.参数名

2、动态路由传参

配置动态路由

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（以后上线需要服务器端支持）

const router = new VueRouter({
    routes,
    mode: "history"
})

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

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

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

两种语法：

1、path路径跳转（简易方便）

this.$router.push('路由路径')

this.$router.push({
    path:'路由路径'
})

2、name命令路由跳转(适合path路径长的场景）

this.$router.push({
    name: '路由名'
})

{name: '路由名', path: '/path', component: XXX}

* 编程式导航-路由传参

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

1、path路径跳转传参（query传参）

this.$router.push('/路径?参数名1=参数值1&参数名2=参数值2)

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

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

2、path路径跳转传参（动态路由传参）

this.$router.push('/路径/参数值')

this.$router.push({
    path: '/路径/参数值'
})

3、name命名路由跳转传参（query传参）

this.$router.push({
    name:'路由名字',
    query: {
        参数名1: '参数值1',
        参数名2: '参数值2'
    }
})

4、name命名路由跳转传参（动态路由传参）

this.$router.push({
    name:'路由名字',
    params: {
        参数名1: '参数值1',
        参数名2: '参数值2'
    }
})

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

前端（vue）学习笔记（CLASS 6）：路由进阶