vue2声明式导航与编程式导航

最新推荐文章于 2025-03-01 16:09:44 发布

别看我只是一只杨女士1

最新推荐文章于 2025-03-01 16:09:44 发布

阅读量894

点赞数 11

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/2301_81022805/article/details/143469589

版权

路由

Vue中路由是路径和组件的映射关系，根据路由就能知道不同路径的，应该匹配渲染哪个组件

VueRouter插件

VueRouter是Vue官方的一个路由插件，是一个第三方包，修改地址栏路径时，切换显示匹配的组件

VueRouter的使用

五个基本步骤（固定）（在main.js文件中）
1. 下载：下载VueRouter模块到当前工程，版本3.6.5
  yarn add vue-router@3.6.5
2. 引入
  import VueRouter from 'vue-router'
3. 安装注册
  Vue.use(VueRouter)
4. 创建路由对象
  const router = new VueRouter({在这里配置路由规则})
5. 注入，将路由对象注入到new Vue实例中，建立关联
```
new Vue({
    render: h => h(App),
    router: router
}).$mount('#app')
```
两个核心步骤
1. 创建需要的组件（这些组件放在views目录中，不要放在components中），配置路由规则（在main.js文件中）
2. 配置导航，配置路由出口（路径匹配的组件显示的位置）（在App.vue文件中）

组件存放目录问题（组件分类）

src/views文件夹：存放页面组件，用于页面展示，配合路由使用
src/components文件夹：存放复用组件，用于展示数据，常用于复用

路由的封装抽离

把路由配置从main.js文件中抽离出来，放到router文件夹中的index.js文件中，在main.js中导入index.js文件并注入router即可
好处：拆分模块，利于维护

Vue路由-重定向

问题：网页打开，url默认是/路径，为匹配到组件会显示空白
说明：重定向->匹配path后，强制跳转到path路径
语法：{ path: 匹配路径， redirect：重定向到的路径 }
在这里插入图片描述

Vue路由-404提示页面

作用：当路径找不到匹配时，给个提示页面
位置：配在路由最后
语法：path: "*" component: NotFound(可以是任意路径，前面不匹配就命中这个)
在这里插入图片描述

Vue路由-模式设置

hash路由（默认）：包含‘#’ eg：‘http://localhost:8080/#/home’
history路由（常用）：不含‘#’，且以后上线需要服务器端支持 eg：‘http://localhost:8080/home’

若不想让路由中出现#，则要配置mode: 'history'：

const router = new VueRouter({
    routes:[
        {}
    ],
    mode: 'history'
})

声明式导航

router-link

导航链接

需求：实现导航高亮效果
vue-router提供了一个全局组件router-link（取代a标签）
1. 能跳转：配置to属性指定路径（必须），本质还是a标签，to不需要加#
2. 能高亮：默认提供高亮类名，可以直接设置高亮样式，在css中设置a.router-link-active{} 样式

两个类名

1. router-link-active: 模糊匹配（用的多）
  eg：to='/my’可以匹配/my /my/a /my/b
2. router-link-exact-active： 精确匹配
  eg：to='/my’仅可以匹配/my
自定义两个类名：

跳转传参

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

查询参数传参
1. 语法格式：to='/path?参数名=值'
2. 对应页面组件接受传递过来的值：$route.query.参数名,若在js代码中获取，需要在前面加上this.
动态路由传参
1. 配置动态路由(写在要跳转到的页面)
  图中words表示参数名，可以随便起名
2. 配置导航链接to="/path/参数值"
3. 对应页面组件接受传递过来的值$route.params.参数名

两种传参方式的区别
1. 查询参数传参（适合传多个参数）
  1. 跳转：to='/path?参数名1=值1&参数名2=值2'
  2. 获取：$route.query.参数名
2. 动态路由传参（简洁优雅）
  1. 配置动态路由：path:"/path/:参数名"
  2. 跳转：to='/path/参数值'
  3. 获取：$route.params.参数名
动态路由参数可选符
问题：配了路由path:"/search/:参数名"后，直接点击搜索按钮跳转为什么会显示空白
原因：path:"/search/:参数名"表示必须要传递参数，在后面加一个?就可以解决这个问题
eg：path:"/search/:参数名?"

编程式导航

编程式导航：用js代码实现跳转功能，主要用在点击按钮跳转

基本跳转

两种语法：

path路径跳转（简易方便）
语法：

// 简写方式
this.$router.push('/path')

// 完整写法
this.$router.push({
    path: '/path'
})

name命名路由跳转(适合path路径长的场景)

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

<!-- 在router/index.js中 -->
{ name: 'search', path: '/search/:words?', component: Search }

路由传参

两种传参方式：查询参数传参、动态路由传参
两种跳转方式：path路径跳转、name命名路由跳转

跳转+传参：

path路径跳转传参

// path路径跳转查询参数传参
// 简写
this.$router.push('/路径?参数名1=参数值1&参数名2=参数值2')
// 完整
this.$router.push({
    path: '/路径',
    query： {
        参数名1=参数值1,
        参数名2=参数值2
    }
})

// path路径跳转动态路由传参
// 简写
this.$router.push('/路径/参数值')
// 完整
this.$router.push({
    path: '/路径/参数值'
})

name命名路由跳转传参

// name命名路由跳转查询参数传参
this.$router.push({
    name: '路由名字'
    query: {
        参数名1=参数值1,
        参数名2=参数值2
    }
})


// name命名路由跳转动态路由传参
this.$router.push({
    name: '路由名字'
    params: {
        参数名1=参数值1,
        参数名2=参数值2
    }
})

组件缓存 keep-alive

问题：面经点到详情页，再点返回，数据重新加载了 => 希望回到原来的位置
原因：路由跳转后，组件被销毁了，返回的组件被重建，所以数据重新加载了
解决：利用keep-alive将组件缓存下来

keep-alive是什么

keep-alive是Vue的内置组件，当他包裹动态组件时，会缓存不活动的组件实例，而不是销毁
keep-alive是一个抽象组件，本身不会渲染Dom元素，也不会出现在父组件链中
优点：防止重复渲染DOM，减少加载时间及性能损耗

keep-alive的三个属性

include：组件名数组，只有匹配的组件会被缓存
exclude：组件名数组，任何匹配的组件都不会被缓存
max：最多可以缓存多少组件实例
语法：
① <keep-alive :include="[组件名]"></keep-alive>
② <keep-alive :exclude="[组件名]"></keep-alive>
【注意】：① 组件名不完全等于组件文件名，当组件被用name属性重命名时，重命名的名字就是组件名，否则，组件文件名就是组件名 ② 当使用keep-alive时，组件将不会触发created、mounted、destroyed等生命周期钩子