路由
路由:就是一一对应关系的集合。
文章目录
前端路由工作原理
前端路由的本质, 对url的hash值进行改变和监听,切换对应页面组件的dom结构
路由分为前端路由和后端路由
前端路由(单页应用程序): 一个url地址,对应哪个组件
后端路由:一个接口地址,对应哪一段接口地址
前端路由简单实现
思路
1. URL 地址栏中的 Hash 值发生了变化
2. 前端js监听了到 Hash 地址的变化 window.onhashchange=()=>{}
3. 前端js把当前 Hash 地址对应的 <component :is="Hash 值对应的组件"></component>组件渲染都浏览器中
一、路由-官方路由基本使用
步骤
- 安装包
npm i vue-router@3.5.3
- 配置路由
// 导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'
// 使用插件 - 重要
Vue.use(VueRouter)
// 导入组件
import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
import Page3 from './Page3.vue'
// 创建路由规则
const router = new VueRouter({
routes: [
{
path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时,
component: Page1 // 装入组件 Page1
},
{
path: "/page2",
component: Page2
},
{
path: "/page3",
component: Page3
}
]
})
export default router
3.使用路由 在main.js中
import router from './router/index.js'
new Vue({
router: router, // 使用路由
render: h => h(App),
}).$mount('#app')
- 组件中使用路由
<router-view></router-view>
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
二、声明式导航-router-link
1. Router-link组件介绍
作用: 用于提供路由链接,实现页面跳转
格式:<router-link to="/home">首页</router-link>
要点:
● 是vue-router提供的组件
● router-link最终会渲染成a链接
● router-link自带链接导航高亮的功能
示例
<template>
<div>
<h1>App组件</h1>
<ul>
<li><router-link to="/home">首页</router-link></li>
<li><router-link to="/movie">电影</router-link></li>
<li><router-link to="/about">关于</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
激活类名
router-link-exact-active router-link-active
可以通过vue的调试工具查看a标签的变化
vue路由传参的方式
两种方式:
- query传参。 适用场景:页面搜索
<li><router-link to="/goods?name=外套">外套</router-link></li>
- params传参。 适用场景:详情页
<li><router-link to="/goods/123">详情</router-link></li>
params传参要配置路由规则
图示-查询字符串
图示-params传参
vue路由接收参数
$route.query.name ---接收的query方式的参数
$route.params.goodsId ---接收的params方式的参数
路由-重定向
理解:
重定向, 用户访问的是A地址,系统把它切换到B地址。
应用场景:改变默认访问页面的行为
配置路由
const routes = [
{
path: "/",
redirect: "/home" // 重定向
}
]
路由404
可以直接在路由规则中配置
{ // 当上面路由都不匹配, 匹配这个通配符, 显示NotFound页面
path: "*",
component: NotFound
}
三、编程式导航
编程式导航 ====> 写代码的方式来让页面跳转
API
// 跳转页面不传参
this.$router.push('/路由路径')
this.$router.push({path: '路由路径'})
this.$router.push({name: '路由名称'})
// 跳转并query传参-方式1
this.$router.push("/路由路径?参数1=值1&参数2=值2")
// 跳转并query传参-方式2
this.$router.push({
path: "路由路径",
query: {
"参数1":值1,
"参数2":值2
}
})
// 跳转并params传参-方式1
this.$router.push("/路由路径/值1/值2")
// 跳转并params传参-方式2
this.$router.push({
name: "路由名称",
params: {
"参数1":值1,
"参数2":值2
}
})
// 后退
$router.back()
vue路由接收参数
$route.query.name ---接收的query方式的参数
$route.params.goodsId ---接收的params方式的参数
三、路由嵌套
原理:router-view中再次包含router-view。
背景:一个组件内部包含的业务还是很复杂,需要再次进行拆分。
格式:
routes:[
{
path: '/page1',
component: Page1, // 这个组件内部还有router-view
children: [
{
path:'', // path为空,表示当 #/page1时,显示 Page1组件+组件1
component: 组件1 //
},
{
path:'/xx1', // path以/开头,表示当 #/xx1时,显示 Page1组件+组件2
component: 组件2
},
{
path:'xx2', // path以/开头,表示当 /page1/xx2时,显示 Page1组件+组件3
component: 组件3
}
]
}
]
实例:
总结
- 在已有的路由容器中,再实现一套路由,再套一个路由容器,叫:嵌套路由。
- 嵌套路由除了 router-view 之间需要嵌套,路由规则也需要通过children来实现嵌套。