路由👺👺👺

单页面和多页面

1. 单页面:所有功能在一个页面上实现
2. 与单页面相反,不同的页面不同的功能

单页面和多页面对比

路由是什么

• 就是一一对应关系的集合
• 前端

前端路由

背景知识

1. hash值
2. hash是url一部分
3. hash不会影响页面的刷新
4. hash可以通过window.onhashchange监听到

实现原理

• 监听onhashchange变化
• 写配置规则:hash是xxx去加载什么组件

vue-router

使用步骤

1. 创建新项目,可以自定义安装配置vue-router(不用自己写代码)
2. 老项目+手动引入vue-router

• 2.1 首先下载包 npm i vue-router@3.5.3  (与vue2是配套 vue3就下载最新版本vue-router)
• 2.2创建router/index.js ,cv基本结构 ,自定义导入组件配置路由规则
• 2.3main.js文件引入router
• 2.4 设置路由出口 app.vue

导航

router-link

语法

<router-link to="路径"></router-link>
router-link本质是a标签
如果匹配当前的path他会自己添加两个class
1.router-link-exact-active
2.router-link-active
作用是设置点击高亮

编程时 三种方式

this.$router.push()

页面跳转传参

方式一:query传参

语法

传:
  ：to="/page1?a=1&b=2"
    this.$router.push( '/page1?a=1&b=2' )
收: this.$route.query.a

方式二:params传参

传:
1. to="/page1/1/2"
2. this.$router.push( '/page1/1/2' )
路由配置:   path: '/page1/:id/:name'
收:  this.$route.params

重定向 (敲网址跳到指定的页面) 语法

  { path: '/a',  redirect: '/b' }
    访问/a，自动跳到/b

404 语法

{path: '*', component: page404}
配置默认在最后面 (router/xxx.js默认配置路线的后面)

嵌套路由 二级路由

• 就是在指定的一级路由配置项上加一一个children数组

不要emo 我们所经历的都是最好的安排