vue与react中router的使用
vue router的使用
安装和使用
安装
pnpm install vue-router
使用
*设定目录的化名*
为了方便我们在移动组件的时候方便，我们在项目中一般会用@来对应src目录，在根路径的vite.config.js中加入
resolve: {
alias: {
"@": "/src",
},
},
在项目中使用vue router，大致需要以下三步
- 创建配置好router 实例，也即定义好，什么路径，渲染什么组件，给浏览器一个path（路径），浏览器就跳到一个页面
- 在main.js中使用配置，也即定义好，我要在这个vue app中使用路由这个插件，在vue实例上面挂载定义好的路由实例
- 定义好页面在哪里显示，前两步做完后，还需要在页面定义一个展示页面的位置。
在src/router文件夹下，新建index.js文件，在文件中，写入如下代码：
// 引入 创建路由实例和路由模式的函数
import { createRouter, createWebHistory } from "vue-router";
// createWebHashHistory // hash #'模式 地址带hash值
// createWebHistory // history 模式 历史路由模式
// 静态引入
import home from "../pages/home.vue";
// 创建路由实例和路由模式
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
// component:() => import('@/pages/home.vue')//动态引入
component: home,
name: "home",
redirect: "/axios1",
},
{
path: "/axios1",
name: "axios1",
component: () => import("@/components/axios/AxiosNew.vue"), //动态引入
},
],
});
// createRouter 参数是一个对象
// 属性 history: 使用的路由模式
// 属性 routes: 路由规则数组 数组中每一个规则对象模式配置
// 暴露出路由实例
export default router;
-
vue-router中引入创建路由实例和路由模式的函数{ createRouter, createWebHistory }
-
路由器实例是通过调用
createRouter()函数创建的 -
history选项控制了路由和 URL 路径是如何双向映射的，可选值为createWebHistory()H5历史路由 或createWebHashHistory()hash历史路由 -
routes 配置具体的路由信息
-
历史路由模式可能在服务器部署的时候出现的问题：
由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问
https://example.com/user/id，就会得到一个 404 错误。要解决这个问题，需要做的就是在自己的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的
index.html相同的页面。
routes中可以定义的属性有：
path(string):路由的路径。可以是一个静态路径，也可以包含动态路径参数。name(string):路由的名称。用于在程序中标识路由，便于在导航时引用。component(Component): 路由对应的组件。指定该路由匹配时应该渲染的组件。redirect(string | Function): 重定向到其他路由。可以是一个字符串路径或一个返回路径的函数。children(Array): 嵌套路由。允许在一个路由下定义子路由，形成嵌套的路由结构。meta元信息。可以是任意类型的数据，用于存储与路由相关的额外信息。
在src/main.js文件中，加入如下代码，主要是引入router，并且.use(router)
import { createApp } from "vue";
import "./style.css";
import App from "./App2.vue";
import router from "./router/index.js";
createApp(App).use(router).mount("#app");
在/src文件夹下新增App2.vue组件,主要是这个router-view标签，只有定义了它你的路由才能渲染在这上面
<template>
<router-view />
</template>
<script setup></script>
<style></style>
history模式与hash模式的区别，可以粗略的记为：
- hash模式，url中会有 # 符号
- 而history模式没有没有 # 符号
路由跳转
router-link
使用router link组件，即可直接跳转，使用方法为:
他接受一个to属性，这个属性可以是一个字符串，也可以是一个对象
如果是字符串，那么则代表需要跳转的路径
如果是对象，则可接受以下属性：
path(string): 目标路由的路径，表示要导航到的页面的路径。name(string): 要导航到的目标路由的名称。params(Object): 路由的动态片段，用于包含参数，例如/user/:id中的id。query(Object): 用于包含查询参数的对象，例如/path?query=string中的query部分。state(Object): 用于传递状态的对象，可以在导航时与目标路由相关联。这个状态在目标页面中可以通过window.history.state访问到。
query 与path 是一对，params 与name 是一对，params传参需要路由先配置动态参数
<router-link :to="{ path: 'user', query: { id: '1' },state:{a:1}}">
query跳转到用户
</router-link>
<br>
<!-- 需要路由先配置动态参数test -->
<router-link :to="{ name: 'user', params: { test: '1' },state:{b:1}}">
params跳转到用户
</router-link>
<br>
<router-link to="axios1">跳转到axios</router-link>
注意上述 params、query、state之间的区别
useRoute方法（url上值的获取）获取当前页面路由信息
我们前面说到可以通过，params和query来向页面中传递数据，那么怎么获取呢，就是通过这个useRoute方法来获取到
const route = useRoute();
console.log(route.query);
console.log(route.params);
useRouter方法（js跳转路由） 获取整个项目路由信息并实现页面跳转
使用useRouter也可以进行页面的跳转，此方法返回一个路由的实例，在这个实例中，有一个push方法，传入一个参数，属性可以是一个字符串，也可以是一个对象。用此方法，就可以跳转路由，他接受的参数，跟上面的router link相同
再次强调，传参的时候，params传参需要使用name跳转页面，并且提前配置动态路由参数片段；query传参使用path 来跳转路径
import { useRouter } from "vue-router";
const router = useRouter();
function goOther() {
router.push({ name: "list", params: { test: 1 } });//需要路由规则先配置动态参数test
}
路由的嵌套
路由的嵌套，首先需要写一个包裹组件，在包裹组件中定义好 <router-view />标签
<template>
<div>
<header>头部</header>
<main>
<router-view></router-view>
</main>
</div>
</template>
<script setup></script>
<style></style>
然后再到router/index中，将这个页面配置进去，并在其下添加children属性，特别注意，下面的path一定不要再加/，不加/代表的是/menu/list，而加了以后则代表是单独的路由 /list
{//父级路由配置
path:'/father',
name:'father',
component:()=>{ return import('../pages/father.vue')},
//动态返回父级组件
// 嵌套的子级
children:[
{//子级路由配置
path:'children',
name:'children1',
component:children
//动态返回子级组件
},{
path:'children2',
name:'children2',
component:()=>{
return import('../pages/children2.vue')
}
}
]
}
嵌套路由 重点 就在于路由规则配置的属性children
children 代表当前的路由是一个嵌套的路由
最外层的路由是配置routes 对应 APP.vue的页面的router-view 路由出口
children子级路由需要有自己的一个路由出口，这个出口就设置在父级路由的组件里面
路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：
// 静态导入
import List from "../page/路由/列表.vue";
// 动态导入
const List = () => import("../page/路由/列表.vue");
const list = ()=>{
return import("../page/路由/列表.vue")
}
react router使用
安装
pnpm i react-router-dom
使用
在src下创建router文件包，在router中创建index.js文件
import Login from "../page/Login";
import Article from "../page/Article";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path: '/login',
element: <Login />
},
{
path: '/article/:id/:name',
element: <Article />
},
])
export default router
路由跳转
声明式：使用 <Link/> 组件，常用于导航栏
import { Link } from "react-router-dom"
const Login = () => {
return (
<div>
我是登录页
<br />
<Link to='/article'>跳转到文章页</Link>
</div>
)
}
export default Login
语法说明：通过给组件的to属性指定要跳转到路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过字符串拼接的方式拼接参数即可
编程式：使用 useNavigate 钩子
import { useNavigate } from "react-router-dom"
const Login = () => {
const navigate = useNavigate()
return (
<div>
我是登录页
<br />
<button onClick={() => navigate('/article')}>跳转到文章页</button>
</div>
)
}
export default Login
传参
1.searchParams传参：使用 ? 和 & 拼接，不需要修改
import { Link, useNavigate } from "react-router-dom"
const Login = () => {
const navigate = useNavigate()
return (
<div>
我是登录页
<br />
<button onClick={() => navigate('/article?id=10&name=Tom')}>searchParams传参</button>
</div>
)
}
export default Login
接收：使用 useSearchParams ,解构params，并使用get方法
import { useSearchParams } from "react-router-dom"
const Article = () => {
const [params] = useSearchParams()
let id = params.get('id')
let name = params.get('name')
return <div>我是文章页{id}{name}</div>
}
export default Article
2. params传参 使用 / ，需要修改router
import Login from "../page/Login";
import Article from "../page/Article";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path: '/login',
element: <Login />
},
{
path: '/article/:id/:name',
element: <Article />
},
])
export default router
import { Link, useNavigate } from "react-router-dom"
const Login = () => {
const navigate = useNavigate()
return (
<div>
我是登录页
<br />
<button onClick={() => navigate('/article/100/Tom')}>params传参</button>
</div>
)
}
export default Login
接收：使用 useParams
import { useParams} from "react-router-dom"
const Article = () => {
const params = useParams()
let id = params.id
let name = params.name
return <div>我是文章页{id}{name}</div>
}
export default Article
嵌套路由
- 使用
children属性配置路由嵌套关系 - 使用
<Outlet/>组件配置二级路由渲染位置
修改router
import Login from "../page/Login";
import Article from "../page/Article";
import Layout from "../page/Layout";
import About from "../page/About";
import Board from "../page/Board";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path: '/login',
element: <Login />
},
{
path: '/article/:id/:name',
element: <Article />
},
{
path: '/layout',
element: <Layout />,
children: [
{
path: 'about',
element: <About />
},
{
path: 'board',
element: <Board />
},
]
},
])
export default router
Layout组件
import { Link, Outlet } from "react-router-dom"
const Layout = () => {
return (
<div>
我是一级路由layout
<br />
<Link to='/layout/about'>关于</Link>
<br />
<Link to='/layout/board'>面板</Link>
{/* 配置二级路由出口 */}
<Outlet />
</div>
)
}
export default Layout
默认二级路由
当访问的是一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置index属性为true
import Login from "../page/Login";
import Article from "../page/Article";
import Layout from "../page/Layout";
import About from "../page/About";
import Board from "../page/Board";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path: '/login',
element: <Login />
},
{
path: '/article/:id/:name',
element: <Article />
},
{
path: '/layout',
element: <Layout />,
children: [
{
// path: 'about',
// 设置默认二级路由
index: true,
element: <About />
},
{
path: 'board',
element: <Board />
},
]
},
])
export default router
vue中为将path设置为空
{//父级路由配置
path:'/father',
name:'father',
component:()=>{ return import('../pages/father.vue')},
children:[
{//子级路由配置
path:'',
name:'children1',
component:children
},{
path:'children2',
name:'children2',
component:()=>{
return import('../pages/children2.vue')
}
}
]
}
404路由配置
场景：当浏览器输入url的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行渲染
实现步骤：
- 准备一个NotFound组件
- 在路由表数组的末尾，以*号作为路由path配置路由
...
import { createBrowserRouter } from "react-router-dom";
import NotFound from "../page/NotFound";
const router = createBrowserRouter([
...
{
path: '*',
element: <NotFound />
}
])
export default router
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
