备案控制台
开发者社区 开发与运维 文章 正文

Vue和React对比学习之路由(Vue-Router、React-Router)

2023-04-27 394
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Router

简介

今天我们再来对比学习下Vue-Router和React-Router。

如果你已经熟练使用Vue-Router和React-Router，并且也知道Vue-Router4新特性和React-Router6新特性可以直接阅读本文。如果还不清的话可以先看看笔者前面写的Vue-Router3和Vue-Router4的对比，以及React-Router4/5和React-Router6的对比。

希望通过这种对比方式的学习能让我们学习的时候印象更深刻，希望能够帮助到大家。

路由模式

路由模式这块Vue-Router和React-Router都支持原生浏览器行为的history、hash模式和使用数据结构实现的abstract/memory模式。

但是使用方式上稍有区别。

Vue-Router支持 history、hash、abstract

Vue-Router的路由模式是在创建时指定的。

const router = createRouter({
  mode: "history",
  routes
})

React-Router支持 history、hash、memory

React-Router是在具体使用的时候指定的。

<BrowserRouter>
  <App />
</BrowserRouter>

路由跳转

Vue-Router和React-Router都支持链接式导航和编程式导航，并且都支持自定义设置激活链接的样式。

Vue-Router使用<router-link />实现链接式导航

<router-link to="/home">Home</router-link>

Vue-Router使用this.$router或useRouter实现编程式导航

// Vue-Router3
this.$router.push("/home")
this.$router.replace("/home")

// Vue-Router4
const router = useRouter()
router.push("/home")
router.replace("/home")

React-Router使用<Link />、<NavLink />实现链接式导航

<Link to="/home">Home</Link>

// 可以定义激活时的class或者style，也就是多了样式设置。
<NavLink to="/home">Home</NavLink>

React-Router使用history或navigate实现编程式导航

// React-Router4/5 类组件
this.props.history.push("/home")
this.props.history.replace("/home")

// React-Router6 函数组件
const navigate = useNavigate()
navigate("/home")

路由渲染

在Vue-Router中，使用 <router-view /> 组件就能把匹配到组件渲染出来，而React-Router需要使用定义路由的<Route />组件或<Outlet />。

Vue-Router 使用 <router-view />就能把匹配到的组件渲染出来。

在 Vue 中我们传递路由配置创建好路由后，只需要使用<router-view />就能把匹配到的组件渲染出来。

// App.vue

<template>
  <router-view />
</template>

React-Router 使用 <Route /> 或 <Outlet />

在React中，不用提前通过配置文件创建路由，而是在使用的时候才定义路由，所以定义路由和路由渲染是在一起的，都是使用 <Route /> 组件。

<Switch>
  <Route path="/home" component={Home}></Route>
</Switch>

在React-Router6中子组件支持<Outlet />的写法，具体可以看React-Router4/5和React-Router6的对比。

// User.jsx 子组件 

<Outlet />

路由参数

Vue-Router和React-Router都支持路由参数的传递和获取，并且都支持显示传参和隐式传参。

Vue-Router 使用router传递参数

Vue-Router支持传递query和params两种参数，使用时需要注意以下两点。

  1. query传参会在浏览器路径看到，并且刷新页面参数不会丢失。
  2. params传参会在浏览器路径看不到，并且刷新页面参数会丢失。并且可以用在普通路由或动态参数路由上。但是需要注意，当应用到动态参数路由上时我们就不能通过params传参了，只能通过params动态传参。
// vue-Router3

// params传参
this.$router.push({ name: 'user', params: { name: 'randy' } })

// query传参
this.$router.push({ path: '/register', query: { name: 'randy' } })

// Vue-Router4

const router = useRouter()
// params传参
router.push({ name: 'user', params: { name: 'randy' } })
// query传参
router.push({ path: '/register', query: { name: 'randy' } })

Vue-Router 使用query和params接收参数

// Vue-Router3
this.$route.query.xxx
this.$route.params.xxx

// Vue-Router4
const route = useRoute()
route.query.xxx
route.params.xxx

React-Router使用history或navigate传参

React-Router支持传递search、params和state三种参数，使用时需要注意以下三点。

  1. search传参会在浏览器路径看到，并且刷新页面参数不会丢失。但是参数需要自己获取并处理，一般我们使用URLSearchParams处理。
  2. params传参只能应用在动态路由上，普通路由传参不能使用。
  3. state传参不会在浏览器路径看到，在history模式下刷新页面参数不会丢失，但是在hash模式下刷新页面参数会丢失。
// React-Router4/5
this.props.history.push({
  pathname: "route3",
  search: "?sort=name",
  hash: "#the-hash",
  state: { fromDashboard: 1 },
});

// React-Router6
navigate(
  { pathname: "../route3/78", search: "name=demi", hash: "hash3" },
  {
    state: { fromDashboard: "navigate state" },
    replace: false,
  }
);

React-Router使用search、params和state接收参数

// React-Router4/5类组件
this.props.location.state
this.props.location.search
this.props.match.params
// React-Router4/5函数式组件
const params = useParams()
const location = useLocation()
location.state
location.search //search字符串参数 '?name=randy'

// React-Router6
const params = useParams()
const location = useLocation()
location.state
location.search //search字符串参数 '?name=randy'

const [searchParams, setSearchParams] = useSearchParams(); // search参数，已经使用URLSearchParams封装好了

监听动态路由参数变化

Vue-Router和React-Router都支持动态路由，都能通过params获取到动态路由参数。

动态路由在Vue和React中都做了优化，也就是动态参数的变化并不会让组件重新创建和销毁。也就不会触发组件创建、绑定和销毁相关的钩子函数。所以经常会遇到我们写在mounted或者unmounted中的代码不会被重新触发的问题。

比如我们写在mounted生命周期函数中的逻辑，通过获取动态参数然后去后台请求获取数据，参数改变需要重新获取数据的逻辑就行不通了，那应该怎么修改呢？

Vue-Router监听参数变化的五种方式

在Vue中我们可以通过beforeUpdate、updated、beforeRouteUpdate、watch、watchEffect五种方式来监听动态路由参数的变化。

动态路由参数的变化会触发beforeUpdate、updated生命周期函数以及beforeRouteUpdate路由组件内钩子函数。所以上面的例子，通过动态参数获取后台数据的逻辑可以在这些钩子中任选一个加上就可以。推荐使用updated。

onBeforeUpdated(() => {
  console.log("route2 onUpdated",route.params.id);
});

onUpdated(() => {
  console.log("route2 onUpdated",route.params.id);
});
    
onBeforeRouteUpdate((to, from) => {
  console.log("route2 onBeforeRouteUpdate", to, from);
});

或者使用watch、watchEffect监听路由的方式来监听参数的变化也是可以的。

watch(
  () => route.params.id,
  (newVal, oldVal) => {
    console.log("watch route: ", newVal, oldVal);
  }
);

watchEffect(() => {
  console.log("watchEffect route: ", route.params.id);
});

如果配置了props模式的话我们还可以监听props。

watch(
  () => props.id,
  (newVal, oldVal) => {
    console.log("watch props: ", newVal, oldVal);
  }
);

watchEffect(() => {
  console.log("watchEffect props: ", props.id);
});

React-Router监听参数变化的四种方式

在React中我们可以通过老版本生命周期函数componentWillReceiveProps、componentWillUpdate、componentDidUpdate或新版本生命周期函数getDerivedStateFromProps、getSnapshotBeforeUpdate、componentDidUpdate以及watchEffect四种方式来监听动态路由参数的变化。

动态路由参数的变化会触发老版本生命周期函数componentWillReceiveProps、componentWillUpdate、componentDidUpdate或新版本生命周期函数getDerivedStateFromProps、getSnapshotBeforeUpdate、componentDidUpdate生命周期函数所以上面的例子，通过动态参数获取后台数据的逻辑可以在这些钩子中任选一个加上就可以。推荐使用componentDidUpdate。

如果是函数组件还可以使用useEffect监听路由的方式来监听参数的变化。

const params = useParams()

useEffect(() => {
  console.log(params);
}, [params]);

路由匹配规则

在Vue-Router和React-Router中，不配置任何规则相关参数的话默认是不用区分大小写和尾部/的。

比如我们配置了一个路由/user/info，在Vue和React中下面这些路径都是可以匹配上的。

/user/info
/user/info/
/USER/INFO
/USER/INFO/
...

Vue-Router支持strict、sensitive

在Vue-Router3只支持配置canSensitive来控制是否忽略大小写。在Vue-Router4支持strict、sensitive来控制是否忽略尾部/和是否忽略大小写。

{
  path: "/home",
  component: Home,
  strict,
  sensitive
}

React-Router支持strict、sensitive

在React-Router中一直支持strict、sensitive来控制是否忽略尾部/和是否忽略大小写。

<Route path="/home" element={<Home />} strict sensitive>

路由获取

Vue任何组件都能获取

在Vue中，只要使用了路由，不管是不是路由组件都可以获取到路由（也就是能方便的使用router和route）。

React非路由组件默认获取不到

但是在React中，非路由组件是不会自动在props中注入路由相关参数的(也就是在props中没有history、location、match)，这就需要用到withRouter高阶组件了。使用了withRouter后才能在非路由使用history、location、match。

当然如果是函数组件我们还可以使用路由相关hooks获取的。

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 Vue-Router 能方便的做到，它让你可以自定义路由切换时页面如何滚动。

但是React-Router并没有封装这一块的东西，需要自己实现。

Vue-Router定义scrollBehavior即可

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

React-Router需要自己实现

window.scroll(00, 0)

路由嵌套

Vue-Router通过配置方式创建路由，路由嵌套一直都很方便使用。

但是React-Router就没那么容易了，需要继续在子组件定义路由。

Vue路由嵌套可直接配置

Vue-Router只需要在routes里面配置好就可以了。

{
  path: "/home",
  component: Home,
  children: [
    {
      path: "/child1",
      component: Child1,
    }
  ]
}

父组件只需要使用<router-view />就能渲染出子组件。

// Home
<template>
  <router-view />
</template>

React路由嵌套需要在子组件定义

在React-Router4/5中，子组件需要继续定义它的孙子组件。

// App.jsx 父组件
<Switch>
  <Route path="/home" component={<Home/>} />
  <Route path="/user" component={<User/>} />
</Switch>

// User.jsx 子组件
<Switch>
  <Route path="/user/info" component={<UserInfo/>} />
  <Route path="/user/detail" component={<UserDetail/>} />
</Switch>

当然React-Router6得到了改进，可以在根组件直接一次性配置。

// App.jsx 父组件
<Routes>
  <Route path="/home" element={<Home/>} />
  <Route path="/user" element={<User/>}>
    <Route path="info" element={<UserInfo/>} />
    <Route path="detail" element={<UserDetail/>} />
  </Route>
</Routes>

// User.jsx 子组件
<Outlet />

配置式路由

Vue-Router一直使用的是配置式路由，配置渲染相分离很方便。但是React-Router如果想要使用配置式路由的话，需要我们自己使用map或者借助react-router-config插件来完成。好消息是React-Router6有了很大的改进。

Vue-Router直接使用配置式路由

Vue-Router一直使用的是配置式路由，这个就不细说了。

{
  path: "/home",
  component: Home,
  children: [
    {
      path: "/child1",
      component: Child1,
    }
  ]
}

React-Router4/5 使用 map 或 react-router-config

首先我们需要定义routes

// routerConfig/routes.js

import Parent from "./Parent";
import Child1 from "./Child1";
import Child2 from "./Child2";

const routes = [
  {
    component: Parent,
    path: "/parent",
    routes: [
      {
        path: "/parent/child1",
        exact: true,
        component: Child1,
      },
      {
        path: "/parent/child2",
        component: Child2,
      },
    ],
  },
];

export default routes;

在根组件，我们需要自己使用map遍历渲染，并把子路由通过routes传递下去。

import routes from "./routerConfig/routes";

<BrowserRouter>
  <Switch>
    {routes.map((route) => {
      return (
        <Route
          path={route.path}
          key={route.path}
          render={(props) => {
            return (
              <route.component
                {...props}
                routes={route.routes}
              ></route.component>
            );
          }}
        ></Route>
      );
    })}
  </Switch>
</BrowserRouter>

在子组件我们还需要继续使用map遍历渲染。

// Parent.js

<Switch>
  {this.props.routes.map((route) => {
    return (
      <Route
        path={route.path}
        key={route.path}
        render={(props) => {
          return (
            <route.component
              {...props}
              routes={route.routes}
            ></route.component>
          );
        }}
      ></Route>
    );
  })}
</Switch>

是不是很复杂，但是我们可以使用react-router-config插件进行简化。

首先安装react-router-config

npm i react-router-config

在根组件，我们只需要使用renderRoutes方法就可以了。

import { renderRoutes } from "react-router-config";
import routes from "./routerConfig/routes";

{renderRoutes(routes)}

在子组件我们继续使用renderRoutes。

// Parent.js

{renderRoutes(this.props.routes)}

相对自己写遍历是不是方便了很多呢？其实react-router-config插件内部实现跟笔者上面写的差不多。

React-Router6 使用 useRoutes

在React-Router6能更方便的实现。只需要使用useRoutes方法。

首先定义routes

// routerConfig/routes.js

import Parent from "./Parent";
import Child1 from "./Child1";
import Child2 from "./Child2";

const routes = [
  {
    element: <Parent></Parent>,
    path: "/parent",
    children: [
      {
        path: "child1",
        element: <Child1></Child1>,
      },
      {
        path: "child2",
        element: <Child2></Child2>,
      },
    ],
  },
];

在根组件，我们只需要使用useRoutes方法就可以了。

这里需要注意useRoutes是hook，所以只能在函数组件或自定义组件使用。

import { useRoutes } from "react-router-dom";
import routes from "./routerConfig/routes";

function App() {
 return {useRoutes(routes)}
}

在子组件我们继续使用Outlet渲染子组件就可以了。

// Parent.js
import { Outlet } from "react-router-dom";

<Outlet />

路由钩子

Vue-Router实现了7个钩子函数

Vue-Router实现了7个钩子函数，可以清除的知道从哪个路由来并去哪个路由。还可以通过next方法我们可以很方便的对路由跳转进行控制。

beforeEach(to, from, next)
beforeResolve(to, from, next)
beforeEnter(to, from, next)
beforeRouteEnter(to, from, next)
beforeRouteUpdate(to, from, next)
beforeRouteLeave(to, from, next)
afterEach(to, from)

比如我们取消跳转，只需要给next()方法传递false就可以了，非常方便。

beforeEach(to, from, next) {
  console.log(to, from)
  // 阻止跳转
  next(false)
}

React-Router没有钩子函数

在React-Router中并没有实现钩子函数，只在history上提供了listen、block两个函数。

listen用来监听路由的变化，路由变了就会被触发。但是需要注意，点击相同路由也会被触发。

componentDidMount() {
  // 路由监听，统一路由重复点击也会重复触发
  this.unlisten = this.props.history.listen((location, action) => {
    console.log(location, action);
  });

// 组件卸载时，解除监听
componentWillUnmount() {
  this.unlisten();
}

block用来阻止路由跳转，可以实现Vue-Router中类似next(false)的功能。

componentDidMount() {
  this.unblock = this.props.history.block((location, action) => {
    console.log(location, action);
    return "离开？";
  });
}

// 组件卸载时，解除监听
componentWillUnmount() {
  this.unblock();
}

上面的例子当我们点击路由跳转后会弹出

image.png

由于React-Router6已经移除了history，所以上面的例子只针对React-Router4/5。

路由鉴权

路由鉴权这块可以说是每个系统中必备的。

在Vue-Router中我们通过钩子函数就能很好实现。但是React-Router相对来说就没那么方便。

Vue-Router中通过钩子函数

比如我们常用的登录权限判断就可以写在beforeEach(to, from, next)中。

beforeEach(to, from, next) {
  const token = localStorage.getItem("token")
  if(token) {
    next()
  } else {
    if(to.paht==="/login") {
      next()
    } else {
      next("/login")
    }
  }
}

React-Router中通过 listen 或高阶组件

我们可以在根组件，使用listen来实现登录权限判断。

componentDidMount() {
  this.unlisten = this.props.history.listen((location, action) => {
    const { pathname } = location;
    const token = localStorage.getItem("token")
    if(!token && pathname !== "/login") {
      this.props.history.replace('/login')
    }
  });

// 组件卸载时，解除监听
componentWillUnmount() {
  this.unlisten();
}

或者使用HOC

假设我们的路由配置如下

const routes = [
  {
    component: Parent,
    path: "/parent",
    auth: false,
    routes: [
      {
        path: "/parent/child1",
        component: Child1,
        auth: false,
      },
      {
        path: "/parent/child2",
        component: Child2,
        auth: true,
      },
    ],
  },
  {
    path: "/login",
    component: Login,
    auth: false,
  },
];

export default routes;

然后我们定义一个Auth高阶组件，用来判断用户是否登录。

import React from "react";
import { Route, Redirect } from "react-router-dom";

function Auth(props) {
  const { component: Component, path, auth, routes } = props;

  const token = localStorage.getItem("token");

  if (!auth) {
    return (
      <Route
        path={path}
        render={(props) => <Component {...props} routes={routes} />}
      ></Route>
    );
  }

  // 如果用户有权限，就渲染对应的路由
  if (auth && token) {
    return (
      <Route
        path={path}
        render={(props) => <Component {...props} routes={routes} />}
      ></Route>
    );
  } else {
    // 如果没有权限，返回配置的默认路由
    return <Redirect to="/login" />;
  }
}

export default Auth;

根组件我们渲染的时候使用我们的Auth组件包裹。

// index.js

import routes from "./routerConfig/routes";

<BrowserRouter>
<Switch>
  {routes.map((route) => {
    return (
      // 路由鉴权
      <Auth key={route.path} {...route}></Auth>
    );
  })}
</Switch>
</BrowserRouter>

子组件我们也使用Auth组件包裹。

// Parent.js

<Switch>
  {this.props.routes.map((route) => {
    return (
      // 路由鉴权
      <Auth key={route.path} {...route}></Auth>
    );
  })}
</Switch>

这样就达到了路由鉴权的效果，当我们本地没token的时候，进入/parent/child2是会重定向到/login页面的。

路由原信息

Vue-Router中路由元信息已经封装好。但是在React-Router中是需要我们通过HOC来实现。

Vue-Router使用meta定义原数据

Vue-Router我们只需要使用meta存放好信息后面通过this.$route.meta就能获取。

// 定义
{
  path: "/home",
  component: Home,
  meta: {title: "home"}
}

// 获取
this.$route.meta.title

React-Router使用HOC

类似上面的鉴权，首先在路由配置里面定义好元数据。

const routes = [
  {
    component: Parent,
    path: "/parent",
    auth: false,
    meta: { title: "Parent" },
    routes: [
      {
        path: "/parent/child1",
        component: Child1,
        auth: false,
        meta: { title: "Child1" },
      },
      {
        path: "/parent/child2",
        component: Child2,
        auth: true,
        meta: { title: "Child2" },
      },
    ],
  },
  {
    path: "/login",
    component: Login,
    auth: false,
    meta: { title: "Login" },
  },
];

export default routes;

然后我们需要定义一个HOC高阶组件。最后最重要的就是我们传递给子组件的属性不再具体的传递routes而是otherProps。这样子组件通过props.meta就能获取到元数据啦。

import React from "react";
import { Route, Redirect } from "react-router-dom";

function Auth(props) {
  const { component: Component, path, auth, ...otherProps } = props;

  const token = localStorage.getItem("token");

  if (!auth) {
    return (
      <Route
        path={path}
        render={(props) => <Component {...props} {...otherProps} />}
      ></Route>
    );
  }

  // 如果用户有权限，就渲染对应的路由
  if (auth && token) {
    return (
      <Route
        path={path}
        render={(props) => <Component {...props} {...otherProps} />}
      ></Route>
    );
  } else {
    // 如果没有权限，返回配置的默认路由
    return <Redirect to="/login" />;
  }
}

export default Auth;

在子组件通过props获取

props.meta.title

image.png

动态路由

Vue-Router需要使用addRoute、addRoute方法

由于Vue-Router在创建路由的时候就需要传递路由配置routes，所以导致在动态添加路由这块不够灵活，需要使用addRoute或addRoutes方法。

React-Router直接渲染即可

由于React-Router不需要提前创建路由，所以可以很轻松的实现路由的动态添加，只需要拿到新路由渲染出来即可。

对比总总结

总体感觉Vue-Router封装的更完善，React-Router更灵活。并且它们相互借鉴，分别引用各自的优点，不断更新达到完善。

相同点

  1. 都支持三种路由模式。
  2. 都支持链接式和编程式导航。
  3. 都支持显示和隐式传参。
  4. 都支持动态路由参数，并且都做了优化，动态参数的改变不会导致组件的重新创建和销毁，并通过各自的方法检测到参数的变化。
  5. 都支持路由匹配规则的设置，可以设置大小写和尾/。
  6. 都支持路由嵌套。
  7. 都支持配置式路由。
  8. 都支持动态路由。

不同点

  1. Vue-Router需要先通过路由配置创建后再使用，而React-Router是一边定义一边使用。
  2. 由于Vue-Router需要先创建再使用，所以在动态添加路由这方面比React-Router复杂，需要使用特定的方法。
  3. Vue-Router路由传参这块封装的更好，特别是query参数这块，以对象的形式使用非常方便。但是React-Router需要自己使用URLSearchParams处理。
  4. 在路由嵌套这块Vue-Router支持的更好，只需要在routes定义好就可以了。而React-Router需要在组件里面层层定义，但是React-Router6已经有了很大的改动，支持在根组件通过嵌套的方式一次性定义好。
  5. Vue-Router封装了7个钩子函数，我们可以很方便对路由实行鉴权以及路由原信息的定义。React-Router没有提供路由钩子函数，需要使用HOC。
  6. 在设置链接激活时的样式时，Vue-Router的<router-link />是自带被激活时的类名的，并且支持自定义。但是React-Router需要单独使用<NavLink>组件才会有被激活时的类名。
  7. 滚动行为Vue-Router已经封装好了，直接使用。但是React-Router需要自己实现。
  8. 配置式路由Vue-Router原生支持。但是React-Router需要使用map或者react-router-config插件来实现。当然React-Router6已经有了很大的优化，可以直接使用useRoutes来渲染配置路由。
  9. 在Vue中，每个组件都能获取到路由信息。但是在React中，只有路由组件才能获取到路由信息，非路由组件需要使用withRouter或者路由相关hooks。

系列文章

Vue和React对比学习之生命周期函数(Vue2、Vue3、老版React、新版React)

Vue和React对比学习之组件传值(Vue2 12种、Vue3 9种、React 7种)

Vue和React对比学习之Style样式

Vue和React对比学习之Ref和Slot

Vue和React对比学习之Hooks

Vue和React对比学习之路由(Vue-Router、React-Router)

Vue和React对比学习之状态管理 (Vuex和Redux)

Vue和React对比学习之条件判断、循环、计算属性、属性监听

后记

感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！

文章标签：
JavaScript
前端开发
网络架构
关键词：
VUE.js路由
React Native学习
vue React Native
VUE.js学习
React Native路由
苏苏同学
目录
相关文章
Star时光
|
2天前
|
JavaScript 前端开发 API
vue和react对比
【7月更文挑战第12天】 Vue和React是前端两大主流框架，各具特色。Vue以其简单API、双向绑定、模板语法和组件化开发吸引开发者，适合快速开发和新手。它的生态系统包括Vuex和Vue Router等。React以虚拟DOM、高性能、组件化和灵活性著称，大型项目和复杂应用常选React，且有庞大社区和丰富的第三方库。选择取决于项目需求、团队技能和未来扩展性。
Star时光
8 3
朝阳39
|
9天前
|
JavaScript 网络架构
vue3 【提效】自动路由（含自定义路由） unplugin-vue-router 实用教程
vue3 【提效】自动路由（含自定义路由） unplugin-vue-router 实用教程
朝阳39
48 0
vue3 【提效】自动路由（含自定义路由） unplugin-vue-router 实用教程
1941623231718325
|
13天前
|
前端开发 JavaScript 数据管理
前端框架对比：React、Vue与Angular
【7月更文挑战第2天】React、Vue和Angular是前端三大框架，各有特色。React以组件化和虚拟DOM著称，适合大型SPA；Vue轻量且易用，适用于快速开发；Angular是全面解决方案，适合复杂应用，但学习成本高。选择取决于项目需求和团队技能。
1941623231718325
18 2
码农阿豪
|
14天前
|
JavaScript
学习和分享关于 Vue.js 的路由（vue-router）
学习和分享关于 Vue.js 的路由（vue-router）
码农阿豪
19 2
朝阳39
|
14天前
|
JavaScript
vue 自动注册路由
vue 自动注册路由
朝阳39
18 1
码农阿豪
|
17天前
|
JavaScript 前端开发 程序员
探索Vue.js宝库：解锁基础知识与实用技能之门（1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发；1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期）
探索Vue.js宝库：解锁基础知识与实用技能之门（1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发；1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期）
码农阿豪
22 1
小周sir
|
2天前
|
存储 前端开发 JavaScript
react hooks 学习进阶
【7月更文挑战第12天】 React Hooks（自16.8版起）让函数组件能处理状态和副作用。useState用于添加状态管理，useEffect处理副作用，useContext共享数据，useReducer处理复杂状态逻辑，useRef获取引用。进阶技巧涉及性能优化，如useMemo和useCallback，以及遵循规则避免在不适当位置调用Hooks。理解异步更新机制和结合Redux等库提升应用复杂性管理。持续学习新技巧是关键。
小周sir
7 0
fruge365
|
4天前
|
JavaScript
【vue】 vue如何根据不同路由地址更改页面的标题
【vue】 vue如何根据不同路由地址更改页面的标题
fruge365
5 0
fruge365
|
4天前
|
JavaScript
【vue】 vue中判断路由变化 | 监听路有变化
【vue】 vue中判断路由变化 | 监听路有变化
fruge365
8 0
朝阳39
|
9天前
|
网络架构
react18【系列实用教程】react-router-dom —— 路由管理 （2024最新版）
react18【系列实用教程】react-router-dom —— 路由管理 （2024最新版）
朝阳39
20 0

热门文章

最新文章

  • 1
    vue视图更新原理、nextTick()原理
  • 2
    vue渲染函数&amp;JSX
  • 3
    SpringBoot + Ant Design Pro Vue实现动态路由和菜单的前后端分离框架
  • 4
    VUE element-ui 之时间格式转时区格式
  • 5
    FastApi+Vue+LayUI实现前后端分离
  • 6
    SpringBoot + Vue前后端分离开发：全局异常处理及统一结果封装
  • 7
    vue数据绑定原理
  • 8
    揭密 Vue 的双向绑定
  • 9
    模拟Vue数据的双向绑定
  • 10
    重读vue电商网站13之使用动态编辑标签
  • 1
    【React】React原理面试题集锦
    72
  • 2
    发现了一款宝藏学习项目，包含了Web全栈的知识体系，JS、Vue、React知识就靠它了！
    51
  • 3
    【React】Hooks面试题集锦
    100
  • 4
    react保姆级搭建新项目
    67
  • 5
    使用React、TypeScript和Ant Design构建现代化前端应用
    83
  • 6
    使用React、Redux和Bootstrap构建社交媒体应用
    35
  • 7
    深入探究React：前端开发的利器
    42
  • 8
    【前端】深入了解React JSX语法及实例应用
    32
  • 9
    利用React Hooks优化前端状态管理
    52
  • 10
    目前最流行的一些前端框架：React、Angular、Vue.js和jQuery
    265

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • React 入门与实战
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践
    • 下一篇
    2024年阿里云免费云服务器及学生三百通用额度申请教程参考