router 路由
作用：路由做页面的跳转
路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页Web应用
构建[前端项目]
npm init vue@latest
//或者
npm init vite@latest
使用Vue3 安装对应的router4版本
使用Vue2安装对应的router3版本
npm install vue-router@4
路由出口 路由匹配到的组件渲染在此 位置任意，根据您的排版来
**四种路由跳转方式 path name a（有缺陷，不用） **
声明式
第一种 Path
默认生成a标签
自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码
to属性 写你定义的path to="/"
第二种 通过name实现跳转
除了 path 之外，你还可以为任何路由提供 name。这有以下优点：
- 没有硬编码的 URL
params的自动编码/解码。- 防止你在 url 中出现打字错误。
- 绕过路径排序（如显示一个）
用name 跳转方式也要改变 :to="{name:'login'}" 把它变成对象
第三种 编程式导航
<template>
<div>
<h1>向画</h1>
<hr>
<div>
<!-- path -->
<!-- <router-link to="/">login</router-link>
<router-link to="/reg" style="margin-left: 10px;">register</router-link> -->
<!-- name -->
<!-- <router-link :to="{name:'login'}">login</router-link>
<router-link :to="{name:'register'}" style="margin-left: 10px;">register</router-link>
-->
<!-- 编程式导航 1.先用path演示-->
<button @click="toPage('/')">login</button>
<button @click="toPage('/reg')">register</button>
</div>
<router-view></router-view>
</div>
</template>
<script lang="ts" setup>
// 需要引入router的hooks
import {useRouter} from 'vue-router';
// 调一下,使用router做跳转
const router =useRouter();
const toPage=(url:String)=>{
// 1.如果是使用path，用push 这是字符串跳转方式 因为传入的url是个字符串
// router.push(url);
// 2.也可以传对象，方便路由进行传参
router.push({
path:url,
})
}
</script>
<template>
<div>
<h1>向画</h1>
<hr>
<div>
<!-- 编程式导航 2.name演示-->
<button @click="toPage('login')">login</button>
<button @click="toPage('register')">register</button>
</div>
<router-view></router-view>
</div>
</template>
<script lang="ts" setup>
// 需要引入router的hooks
import {useRouter} from 'vue-router';
// 调一下,使用router做跳转
const router =useRouter();
const toPage=(url:String)=>{
name:url,
})
}
历史记录 有时不想要点击nav左右箭头 不要历史记录
1 router-link方式 加个replace
<router-link replace to="/" >login</router-link>
2.编程式 把push改为replace
<template>
<div>
<h1>向画</h1>
<hr>
<div>
<router-link replace to="/" >login</router-link>
<router-link replace to="/reg" style="margin-left: 10px;">register</router-link>
<button @click="toPage('login')">login</button>
<button @click="toPage('register')">register</button>
</div>
<router-view></router-view>
</div>
</template>
<script lang="ts" setup>
// 需要引入router的hooks
import {useRouter} from 'vue-router';
// 调一下,使用router做跳转
const router =useRouter();
const toPage=(url:String)=>{
router.replace({
name:url,
})
}
针对历史记录处理的JS逻辑
<template>
<div>
<h1>向画</h1>
<hr>
<div>
<router-link to="/" >login</router-link>
<router-link to="/reg" style="margin-left: 10px;">register</router-link>
<button @click="toPage('login')">login</button>
<button @click="toPage('register')">register</button>
<button @click="next">next</button>
<button @click="prev">prev</button>
</div>
<router-view></router-view>
</div>
</template>
<script lang="ts" setup>
// 需要引入router的hooks
import {useRouter} from 'vue-router';
// 调一下,使用router做跳转
const router =useRouter();
const toPage=(url:String)=>{
// 1.如果是使用path，用push 这是字符串跳转方式 因为传入的url是个字符串
// router.push(url);
// 2.也可以传对象，方便路由进行传参
router.push({
name:url,
})
}
const next=()=>{
router.go(1) 前进1页
}
const prev=()=>{
router.go(-1) 回退1页
}
**路由传参 **vue-router3
json插件
得到json数据 TS类型
插件名：json to ts
使用：选中文本 crtl+shift+alt+s
** # Query路由传参 只接受一个对象**
展示在URL上 http://127.0.0.1:5173/reg?name=小满price=500&id=1
表格页
<template>
<div>列表页面</div>
<table class="table" border="1" cellspacing="0">
<thead>
<tr>
<th>品牌</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 循环展示内容 -->
<tr :key="item.id" v-for="item in data">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="toDetail(item)">详情</button>
</td>
</tr>
</tbody>
</table>
</template>
<script lang="ts" setup>
//解构引入
import {data} from './list.json';
import {useRouter} from 'vue-router';
const router=useRouter();
// interface type 类似
type Item = {
name: string;
price: number;
id: number;
}
const toDetail=(item:Item)=>{
router.push({
path:'/reg',
query:item
})
}
</script>
<style lang="css" scoped>
.table{
width: 400px;
}
</style>
数据页
<template>
<div>
<h3> register 我是详情页面</h3>
</div>
<div>品牌：{{ route.query.name }}</div>
<div>价格：{{ route.query.price }}</div>
<div>ID:{{ route.query.id }}</div>
</template>
<script lang="ts" setup>
// 取值用useRoute 区分useRouter
//导入useRoute
import { useRoute } from 'vue-router';
const route=useRoute();
</script>
<style lang="css" scoped>
</style>
params 必须用name传参 对应routes的name
不会展示在URL上，它存在内存里面，一刷新，数据就会丢失，解决：动态路由参数
<template>
<div>列表页面</div>
<table class="table" border="1" cellspacing="0">
<thead>
<tr>
<th>品牌</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 循环展示内容 -->
<tr :key="item.id" v-for="item in data">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="toDetail(item)">详情</button>
</td>
</tr>
</tbody>
</table>
</template>
<script lang="ts" setup>
//解构引入
import {data} from './list.json';
import {useRouter} from 'vue-router';
const router=useRouter();
// interface type 类似
type Item = {
name: string;
price: number;
id: number;
}
const toDetail=(item:Item)=>{
router.push({
path:'/reg',
params:item
})
}
</script>
<style lang="css" scoped>
.table{
width: 400px;
}
</style>
<template>
<div>
<button @click="router.back()">返回</button>
<h3>register 我是详情页面</h3>
</div>
<div>品牌：{{ route.params.name }}</div>
<div>价格：{{ route.params.price }}</div>
<div>ID:{{ route.params.id }}</div>
</template>
<script lang="ts" setup>
// 取值用useRoute 导入useRoute 区分useRouter
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
</script>
<style lang="css" scoped></style>
# 动态路由传参
很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数
路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件
path:"/reg/:id",
# 嵌套路由
