theme: channing-cyan
「这是我参与2022首次更文挑战的第4天,活动详情查看:2022首次更文挑战」
路由的概念与原理
路由(router),就是对应关系。即 Hash地址(锚点链接) 与 组件 之间的对应关系
注意:锚点链接的特点-->不会刷新页面,但是会产生浏览历史
前端路由的工作方式
- 用户点击了页面上的路由链接
- URL地址栏中的Hash值发生变化 (URL地址的#开始的部分)
- 前端路由监听到了Hash地址的变化
- 前端路由把当前Hash地址对应的组件渲染到浏览器中
前端路由就是 path 与 component 之间的对应关系
前端路由的原理:
- 路由链接的href属性设置为Hash地址 (#开头)
注:hash值不会包含在HTTP请求中,是不会作为路径的一部分发给服务器
```js
```
- 利用动态组件,来控制显示 与Hash地址相对应的组件
- 通过监听浏览器的window对象上的 onhashchange 事件,用location.hash获取当前的hash地址
```
vue-router
vue-router是vue.js官方给出的 路由解决方案。 只能结合vue项目进行使用,能轻松管理SPA项目中组件的切换
vue-router的安装与配置:
- 安装vue-router包
// vue-router@版本号 -S是将此依赖保存在package.json文件中的dependencies节点之下 npm i vue-router@3.5.2 -S
- 创建路由模块
在src源代码目录下,新建一个router文件夹,并且在里面创建index.js,并初始化如下代码
```js // 导入Vue和VueRouter的包 import Vue from 'vue' import VueRouter from 'vue-router'
// 导入需要用的组件 import Home from '@/components/Home.vue' import Movie from '@/components/Movie.vue' import About from '@/components/About.vue'
// 调用Vue.use()函数,把VueRouter安装为Vue的插件 // Vue.use()函数的作用就是给项目装插件。只要是插件都要用Vue.use()来安装 Vue.use(VueRouter)
// 创建路由的实例对象,在构造函数中可以传入一个配置选项 const router = new VueRouter({ // routes是一个数组,用来定义"hash地址"与"组件"之间的对应关系,即路由规则 routes: [ // {path: 路由地址, component: 组件名称} 注意路由地址不带# {path: '/home', component: Home}, {path: '/movie', component: Movie}, {path: '/about', component: About} ]
})
// 向外共享路由的实例对象 export default router ```
src/router/index.js 就是当前项目的路由模块
- 导入并挂载路由模块
```js // 在main.js中,导入并挂载路由模块 import Vue from 'vue' import App from './App.vue'
// 导入路由模块,目的是拿到路由的实例对象 import router from '@/router/index.js'
// 模块化导入时,若只给定文件夹,则默认会导入这个文件夹下的index.js文件 // import router from '@/router'
// 关闭vue的生产环境提示 Vue.config.productionTip = false
// 挂载路由模块 new Vue({ render: h => h(App), // router: 路由的实例对象 router // router: router的简写 }) ```
- 声明路由链接和占位符
```js
```
注意:
- 在切换路由的时候,隐藏了的路由组件是 被销毁 的,再切换回来的时候又重新挂载的
- 每一个路由组件都有一个$route属性,里面存储着各自的路由信息
- 整个应用只有一个router,可以通过每个组件的 $router属性获得
路由重定向
问题场景:当打开网页的时候,默认显示的是首页组件的页面。但是路由链接的hash地址却是井号加斜杠(#/)
用户在访问地址A的时候,强制用户跳转到地址C,从而展示特定的组件页面。
方法:通过路由规则的 redirect属性 ,指定一个新的路由地址
``` const router = new VueRouter({ // routes是一个数组,用来定义"hash地址"与"组件"之间的对应关系,即路由规则 routes: [ // {path: 路由地址, component: 组件名称} 注意路由地址不带# // 当用户访问 / 的时候,通过redirect属性重定向到'/home'对应的路由规则 {path: '/', redirect: '/home'}, {path: '/home', component: Home}, {path: '/movie', component: Movie}, {path: '/about', component: About} ]
})
// 向外共享路由的实例对象 export default router ```
嵌套路由
通过路由实现组件的嵌套展示,叫做嵌套路由
父组件包裹子组件,子组件中又有路由链接,来控制显示孙子级的组件
- 子级路由链接的写法
``` // 在About组件中
About组件
<!-- 子级路由链接 -->
<!-- 写子级路由连接必须带上父级的路径 -->
<router-link to="/about/tab1">tab1</router-link>
<router-link to="/about/tab2">tab2</router-link>
<hr>
<!-- 子级路由占位符 -->
<router-view></router-view>
</div>
```
- 通过children属性声明 子路由规则
在src/router/index.js路由模块中,导入需要的组件,并使用children属性声明路由规则
``` // 导入需要的组件 import Tab1 from '@/components/tabs/Tab1.vue' import Tab2 from '@/components/tabs/Tab2.vue'
const router = new VueRouter({ routes: [ {path: '/home', component: Home}, {path: '/movie', component: Movie}, { // about 的路由规则 path: '/about', component: About, children: [ // 通过children属性,嵌套声明子级路由规则 {path: 'tab1', component: Tab1}, // 访问/about/tab1时展示Tab1组件 {path: 'tab2', component: Tab2} // 访问/about/tab1时展示Tab2组件 // 注意:子路由协议不要以 斜线/ 开头 ] } ] }) ```
- 默认子路由
问题场景:在显示子组件的时候,默认显示某一个孙子级组件
方法一:设置一个路由重定向,将子组件中的某一个孙子级组件默认显示
```js const router = new VueRouter({ routes: [ {path: '/home', component: Home}, {path: '/movie', component: Movie},
{ // about 的路由规则
path: '/about',
component: About,
redirect: '/about/tab1', // 默认展示Tab1组件
children: [
{path: 'tab1', component: Tab1}, // 访问/about/tab1时展示Tab1组件
{path: 'tab2', component: Tab2} // 访问/about/tab1时展示Tab2组件
// 注意:子路由协议不要以 斜线/ 开头
]
}
] }) ```
默认子路由
如果children数组中,某个路由规则的 path值为空字符串,则这条路由规则叫做 默认子路由
```js { // about 的路由规则 path: '/about', component: About,
children: [
{path: '', component: Tab1}, // 访问/about/tab1时展示Tab1组件
{path: 'tab2', component: Tab2} // 访问/about/tab1时展示Tab2组件
]
}
```
注意:设置了默认子路由,相应的路由链接也得修改
路由链接的地址得和路由规则的path一致
```js // 在About组件中
About组件
<!-- 子级路由链接 -->
<!-- tab1是默认子路由 -->
<router-link to="/about">tab1</router-link>
<router-link to="/about/tab2">tab2</router-link>
<hr>
<!-- 子级路由占位符 -->
<router-view></router-view>
</div>
```
跋尾
本篇内容就到这里了~ 我是Zeus👩🏻🚀来自一个互联网底层组装员,下一篇再见! 📖