路由的介绍

路由

Vue中的路由：路径与组件的映射关系

1VueRouter的介绍

作用：修改地址栏路径时，切换显示匹配的组件

五个基本步骤（固定）

① 下载 ：下载VueRouter模版到当前工程，版本3.6.5

npm add vue-router@3.5.6

② 引入

inport VueRouter from 'vue-router'

③ 安装注册

Vue.use(VueRouter)

④ 创建路由对象

const router new VueRouter()

⑤ 注入，将路由对象注入到new Vue实例中，建立关联

new Vue({
?? ?resder:h=>h(app),
?? ?router,
}).$mount('#app')

两个核心步骤

① 创建需要的组件（views目录），配置路由规则

② 配置导航，配置路由出口（路径匹配的组件显示的位置）

2 命名路由

为了方便，可以通过一个名称来标识一个路由，需在创建Router实例的时候，在routes 配置中给某个路由设置名称。

3 Vue路由 - 重定向 - 别名

重名

语法：{path:匹配路径，redirect:重新定向到的路径}

别名

/a的别名是 /b，意味着，当用户访问 /b 时，URL会保持为 /b ，但是路由匹配则为 /a ，就像用户访问 /a 一样，别名的功能可以实现自由的将UI结构映射到任意的URL，而不是受限于配置的嵌套路由结构。

4 Vue路由 - 404

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

位置：配在路由最后

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

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含URL通过通配符被匹配的部分：

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'

// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

5 声明式导航 - 跳转传参

目标：在跳转时路由，进行传值

1、查询参数传参

① 语法格式：to="/path?参数名=值"

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

$route.query.参数名

在created中，通过this.$route.query.参数名获取，便于对数据进行请求

2、动态路由传参

① 配置动态路由

const router = new VueRouter({
	routes:[
		···,
		{path:'/search/:words',component:Search}
	]
})

② 配置导航链接

to="path/参数值"

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

$route.params.参数名

可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。

模式	匹配路径	$route.params
/user/:username	/user/evan	{username:'evan'}
/user/:username/post/:post_id	/user/evan/post/123	{username:'evan',post_id:'123'}

3、两种传参方式的区别

① 查询传参方式的区别（比较适合传多个参数）

跳转：to='/path?参数名=值&参数名2=值2'

获取：$route.query.参数名

② 动态路由传参（优雅简洁，传单个参数比较方便）

配置动态路由：path:'/path/:参数名'

跳转：to='/path/参数值'

获取：$route.params.参数名

4、动态路由参数可选符

const router = new VueRouter({
	routes:[
		···,
		{path:'/search/:words?',component:Search}
	]
})

6 高级匹配模式

安装

npm install path-to-regexp --save

使用

const pathToRegexp = require('path-to-regexp')

// pathToRegexp(path,keys,options)
// pathToRegexp.parse(path)
// pathToRegexp.compile(path)

path：express 样式的字符串、字符串数组 或正则表达式

keys：要用路径中找到的键填充数组

options：

① 大小写：当为true时，路径将区分大小写（默认值：false）

② 严格模式：当为false时，尾部斜杠是可选的（默认值：false）

③ 末尾匹配：当为false时，路径将在开始匹配（默认值：true）

④ 分隔符：为重复参数设置默认分隔符（默认值：‘/’）

注意：path-to-regexp 返回的RegExp用于与路径名或主机名一起使用。他不能处理URL的查询字符串或片段。

7 Vue路由 - 模式设置

hash路由（默认） 例如：http://localhost:8080/#/home

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

编程式导航 - 基本跳转

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

语法：

① path 路径跳转（简单方便）

简写：this.$router.push('路由路径')

完整写法：this.$router.push({path:'路由路径'})

② name 命名路由跳转（适合 path 路径长的场景）

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

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

路由懒加载

路由懒加载指的是打包部署时将资源按照对应的页面进行划分，需要的时候加载对应的页面资源，而不是把所有的页面资源打包部署到一块，避免不必要资源加载。

// 非懒加载
import Home from '@/components/Home'
 
const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  }
]

使用import实现按需加载

// const 组件名 = () => import('组件路径');
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const Home = () => import('@/componnets/home');
const Index = () => import('@/components/index');
 
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件
// 把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home');
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
 
{
  path: '/home',
  name: 'home',
  component: Home
}, {
  path: '/index',
  name: 'index',
  component: Index
}