路由相关跳转、传参

陌^O^

已于 2023-07-27 16:35:21 修改

阅读量281

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-27 11:58:35 首次发布

本文链接：https://blog.csdn.net/qq_56597325/article/details/131935091

版权

该文详细介绍了vue-router的使用步骤，包括安装、注册、创建路由实例、注入Vue实例，以及声明式和编程式导航。重点讲解了动态路由传参、查询参数和路由重定向等关键概念和技术。

摘要由CSDN通过智能技术生成

使用步骤：

基础步骤

1.安装路由

yarn add vue-router@3.6.5（或者）npm install vur-router@3.6.5

2.引入

import VueRouter from 'vue.router'

3.安装注册

Vue.use(VueRouter)

4.创建router实例

const router = new VueRouter()

5.将路由对象注入到new Vue实例中，建立关联

new Vue({
    render:h=>h(APP),
    router
})$mount('#app')

核心步骤

1.创建（view）组件，配置路由规则

const router = new VueRouter({
   routes:[
    {path:'地址栏路径',component:组件},
  ]
})

2.配置路由出口，router-view

router-view将显示与 url 对应的组件。可以把它放在任何地方，以适应你的布局。

路由模块封装

由于所有路由配置在mian.js中，不利于维护，所以将路由模块抽离出来

封装步骤：在src文件夹中创建router文件夹，创建index.js文件封装路由配置

在封装过程中，可以使用@指代src目录，从src目录出发找组件

动态路由传参-声明式导航传参

认识声明导航

router-link可以替代a标签

router-link自带激活类名router-link-active（模糊匹配），router-link-exact-active（精准匹配）

//<router-link to='路径值'></router-link>
//<a href='#路径值'></a>
//此处两者都能实现跳转页面功能
<router-link to='/find'></router-link>
<a href='#/find'></a>

查询参数传参（可以传多个参数）

1、跳转：to = "/path?参数名=值"(传多个参数用&隔开)

2、接收：$route.query.参数名

动态路由传参

1、配置动态路由：path:"/path/参数名"

2、跳转：to="/path/参数值"

3、获取：$route.params.参数名

编程式导航-基本跳转

两种跳转方式：path路径跳转，name命名路由跳转

path路径跳转

简写：

this.$router.push('跳转路由路径')

完整写法：

this.$router.push({

    path:'跳转路由路径'

})

name命名路由跳转

1、在路由配置项中配置路由名称2、

this.$router.push({

    name:'跳转路由名称'
})

编程式导航传参

path路径跳转传参

query传参

简写：

this.$router.push('/跳转路由路径?参数名=参数值')//可穿多个值，用&连接

完整写法：

this.$router.push({
                path:'跳转路由路径',
                query:{
                    参数名1：'参数值',
                    参数名2：'参数值',
                }

            })

接收：

this.$route.query.'参数名'

动态路由传参(配置动态路由)

简写：

this.$router.push('/跳转路由路径/参数值')

完整写法：

this.$router.push({
                path:'跳转路由路径/参数值'
            })

接收：

this.$route.params.'参数名'

name命名路由跳转传参

query传参

this.$router.push({
                name:'跳转路由名',
                query:{
                    参数名1:'参数值1',
                    参数名2:'参数值2'
                }
            })

this.$route.query.'参数名'

动态路由传参

this.$router.push({
                name:'跳转路由名',
                params:{
                    参数名1:'参数值1',
                    参数名2:'参数值2'
                }
            })