路由的介绍

路由

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

1VueRouter的介绍

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

五个基本步骤(固定)

① 下载 :下载VueRouter模版到当前工程,版本3.6.5

npm add [email protected]

② 引入

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
}

你可能感兴趣的:(前端,javascript,vue.js)