国外高大上设计网站,临沂网站建设昂牛网络,注册企业邮箱163,互联网创业项目文章目录 vue2中使用路由Vue3 中使用路由路由传参方式 Vue 2 和 Vue 3 中的路由系统有很多相似之处#xff0c;但也存在一些重要的区别。下面将分别介绍 Vue 2 和 Vue 3 中的路由使用方式#xff0c;并了解下它们之间的不同之处。
vue2中使用路由
在 Vue 2 中#xff0c;通… 文章目录 vue2中使用路由Vue3 中使用路由路由传参方式 Vue 2 和 Vue 3 中的路由系统有很多相似之处但也存在一些重要的区别。下面将分别介绍 Vue 2 和 Vue 3 中的路由使用方式并了解下它们之间的不同之处。
vue2中使用路由
在 Vue 2 中通常使用 Vue Router 来处理路由。下面是一个简单的 Vue Router 示例 1、创建路由文件
import Vue from vue;
import VueRouter from vue-router;
import Home from ./components/Home.vue;
import About from ./components/About.vue;Vue.use(VueRouter);const routes [{ path: /, component: Home },{ path: /about, component: About }
];const router new VueRouter({routes
});export default router;
2、在 main.js 中引入路由
import Vue from vue;
import App from ./App.vue;
import router from ./router;new Vue({render: h h(App),router
}).$mount(#app);
3、在组件中使用
templatediv idapprouter-link to/Home/router-linkrouter-link to/aboutAbout/router-linkrouter-view/router-view/div
/template
Vue3 中使用路由
在 Vue 3 中Vue Router 仍然是常用的路由解决方案。但是Vue 3 引入了 Composition API使得路由的使用方式有了一些变化。 1、创建路由文件
import { createRouter, createWebHistory } from vue-router;
import Home from ./components/Home.vue;
import About from ./components/About.vue;const routes [{ path: /, component: Home },{ path: /about, component: About }
];const router createRouter({history: createWebHistory(),routes
});export default router;2、在 main.js 中引入路由
import { createApp } from vue;
import App from ./App.vue;
import router from ./router;createApp(App).use(router).mount(#app);
3、在组件中使用
templatediv idapprouter-link to/Home/router-linkrouter-link to/aboutAbout/router-linkrouter-view/router-view/div
/template需要注意的是在 Vue 2 中Vue Router 的版本是 3.x而在 Vue 3 中我们需要使用 Vue Router 4.x 版本。需要注意版本兼容性。在 Vue 3 中使用 createRouter 和 createWebHistory 来创建路由实例而不再使用 Vue.use(VueRouter)。
在 Vue 3 中路由导航的 API 和 Vue 2 有些不同 1、使用 useRouter 在组件中使用 useRouter 函数获取路由对象
import { useRouter } from vue-router;export default {setup() {const router useRouter();// use router...},
};
Vue 3 中路由守卫的使用方式基本与 Vue 2 保持一致包括全局前置守卫 beforeEach、全局后置守卫 afterEach 等。
路由传参方式
在Vue中路由传参和跳转有多种方式具体选择哪种方式取决于你的需求和场景。以下是一些常见的方式 1、通过params传递参数
举例
!-- 跳转时传递参数 --
router-link :to{ name: user, params: { userId: 123 }}User/router-link接收参数
// 在目标组件中通过 $route.params 获取参数
const userId this.$route.params.userId;使用场景 适用于参数较少且不涉及敏感信息的情况。
2、通过query传递参数
举例
!-- 跳转时传递参数 --
router-link :to{ name: user, query: { userId: 123 }}User/router-link
接收参数
// 在目标组件中通过 $route.query 获取参数
const userId this.$route.query.userId;使用场景 适用于参数较多或者参数需要保留在 URL 中的情况。
3、通过props传递参数
举例
!-- 在路由配置中设置 props --
router-link :to{ name: user, params: { userId: 123 }}User/router-link!-- 在目标组件中通过 props 接收参数 --
script
export default {props: [userId],// ...
}
/script
使用场景 适用于需要将参数直接传递给组件实例的情况。
4、通过name传递参数
举例
!-- 跳转时传递参数 --
router-link :to{ name: user, params: { userId: 123 }}User/router-link接收参数
// 在目标组件中通过 $route.params 获取参数
const userId this.$route.params.userId;使用场景 适用于需要通过路由的名称来传递参数的情况。
5、编程式导航 使用 router.push、router.replace 和 router.go 进行编程式导航
举例
this.$router.push({ name: user, params: { userId: 123 }});
// Push to a new route
this.$router.push(/about);// Replace the current route
this.$router.replace(/about);// Go back or forward in the history
this.$router.go(-1);使用场景 适用于在 JavaScript 中进行导航的情况例如在事件处理函数中。
6、命名路由
举例
// 在路由配置中设置 name
const routes [{ path: /user/:userId, component: User, name: user }
];
使用场景 适用于在不同地方使用相同的路由配置。
最常用的方式取决于具体需求一般来说params和query是比较常用的传参方式。如果需要在组件内部直接使用参数可以考虑使用props。
