标签：vue 跳转 vue3 Detail 使用 router path 路由

一、路由的概要

1.1、什么是路由？

路由就是一组映射关系，根据不同的 url 地址展示不同的内容或页面（key-value）；
- key为路径，value可能是function或component

路由 ( 英文: router ) 就是对应关系
- 通俗易懂的概念：Hash 地址与组件之间的对应关系

SPA与前端路由
- SPA指的是一个web 网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。
- 此时，不同组件之间的切换需要通过前端路由来实现

1.2、SPA应用：

单页Web应用（single page web application,SPA）
整个应用只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会在页面局部更新
数据需要通过ajax请求获取

1.3、路由的分类

1.3.1、后端路由

理解： value是function，用于处理客户提交的请求

工作过程： 浏览器在地址栏切换url时，会向服务器发送请求，服务器响应后，会根据请求路径找到匹配的函数来处理请求，返回响应数据（页面）。

优点： 分担了前端的压力，html和数据的拼接都是由服务器完成。

缺点： 浏览器会刷新页面，且前后端不分离，当项目十分庞大时，加大了服务器端的压力，同时在浏览器端不能输入制定的url路径进行指定模块的访问。另外一个就是如果当前网速过慢，那将会延迟页面的加载，对用户体验不是很友好。

1.3.2、前端路由

理解： value是component，用于展示页面内容

工作过程： 当浏览器的路径改变时，对应的组件就会显示

工作方式：

1.用户点击了页面上的路由链接
2.导致了URL地址栏中的Hash 值发生了变化
3.前端路由监听了到Hash地址的变化
4.前端路由把当前Hash地址对应的组件渲染到浏览器中

优点:

用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，快速展现给用户
可以再浏览器中输入指定想要访问的url路径地址
实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。

缺点:

使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
单页面无法记住之前滚动的位置，无法在前进、后退的时候记住滚动的位置

路由操作：

1.4、使用方法：

1.4.1、基本路由：

1.安装vue-router,执行命令：npm i vue-router（终端）

2.在vue后引入：import VueRouter from 'vue-router'（router/index.ts文件）

import Vue from 'vue' import VueRouter from 'vue-router'

3.使用插件：Vue.use(VueRouter)（main.js文件）

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

4.编写router配置项：

// 第一步导入 Vue 和 VueRouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 自定义的组件文件
import computedWork from '../views/computedWork.vue'
import computedWorkOne from '../views/computedWorkOne.vue'
import watchOne from '../views/watchOne.vue'
import watchEffect from '../views/watchEffect.vue'

// routes 是一个数组，作用：定义 'hash 地址' 与 '组件之间的对应关系'
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'computedWork',
    component: computedWork
  },
  {
    path: '/computedWorkOne',
    name: 'computedWorkOne',
    component: computedWorkOne
  },
  {
    path: '/watchOne',
    name: 'watchOne',
    component: watchOne
  },
  {
    path: '/watchEffect',
    name: 'watchEffect',
    component: watchEffect
  }
]
// 创建并挂载根实例
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 向外共享路由的实例对象
export default router

5、App.vue文件：

<template lang="">
    <div>
        <h1>嵌套路由</h1>
        <div class="box">
            <div>
                <!-- 当安装了vue-router后，可以使用 router-link 来替代普通的a链接 -->
                <div><router-link to="/写path定义的名称">按键事件1</router-link></div>
                <div><router-link to="/写path定义的名称">按键事件2</router-link></div>
            </div>
            <div>
                <!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-view 这个组件 -->
                <!-- 它的作用很单纯:占位符，相当于一个容器 -->
                <router-view></router-view> 
            </div>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style  scoped>
.box{
    display: flex;
}
.box:first-child{
    width: 200px;
    text-align: center;
}
/* .box:last-child{} */
</style>

1.4.2、嵌套路由：

1、创建两个子组件

components/one：

<!-- 案例一 -->
<template lang="">
    <div>
        <h1>按键事件1</h1>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="">
    
</style>

components/two：

<!-- 案例二 -->
<template lang="">
    <div>
        <h1>按键事件2</h1>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="">
    
</style>

2、配置路由规则，使用children配置项：

{
    path: '/test16',
    component: test16,
    redirect: '/test16/one', // 默认路由 默认页面
    children: [
      // 子路由
      { path: '/test16/one', component: test16_1},
      { path: '/test16/two', component: test16_2},
    ]
  },

3、自定义一个vue文件，跳转（要写完整路径）

 　　　　　　<div>
                <!-- 当安装了vue-router后，可以使用 router-link 来替代普通的a链接 -->
                <div><router-link to="/test16/one">按键事件1</router-link></div>
                <div><router-link to="/test16/two">按键事件2</router-link></div>
            </div>
            <div>
                <!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-view 这个组件 -->
                <!-- 它的作用很单纯:占位符，相当于一个容器 -->
                <router-view></router-view> 
            </div>

4、可以在App.vue直接调用自定义的vue文件

<router-link to="/test16">嵌套路由</router-link> |

<router-view/>

5、图片演示

1.4.3、路由的query参数(路由传参)

1.传递参数

//跳转并携带query参数，to的字符串写法
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
//跳转并携带query参数，to的对象写法
<router-link
    :to="{
        path:'/home/message/detail',
        query:{
            id:666,
            title:'你好'
        }
    }"
>跳转</router-link>

2.接收参数（.vue文件中）

{{ $route.query.id }}
{{ $route.query.title }}

1.4.4、路由的params参数(路由传参)

1.配置路由，声明接收params参数

{
    path:'/home',
    cpmponent:Home,
    children:[
        {
            path:'news',
            component:News
        },
        {   
            path:'message'
            components:Message,
            children:[
                {
                    name:'xuexi',
                    path:'detail/:id/:title',//:xxx是占位符，用来声明接收params参数
                    component:Detail
                }
            ]
        }
    ]
}

2.传递参数

标签：vue,跳转,vue3,Detail,使用,router,path,路由
From： https://www.cnblogs.com/fairya/p/16835855.html

vue3路由的使用