经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
详解uniapp和vue在路由方面的不同和联系
来源:cnblogs  作者:饮风  时间:2023/3/22 9:27:15  对本文有异议

Uniapp 和 Vue 在路由方面有相似之处,因为 Uniapp 是基于 Vue 的。Uniapp 的路由系统是通过 Vue Router 实现的,因此两者有许多相同的概念和 API。

相同点:

  • 都支持基于 URL 的路由;
  • 都可以使用嵌套路由来管理多个页面之间的关系;
  • 都支持路由参数和查询参数的传递;
  • 都支持路由守卫(beforeEach、beforeEnter、beforeLeave)等功能。

不同点:

  • Vue Router 是针对 Web 应用开发的路由库,而 Uniapp 是为多个平台(包括小程序和 H5)开发的跨端框架。因此,Uniapp 的路由系统需要考虑不同平台的差异,例如小程序中没有浏览器的历史记录和前进后退功能;
  • 在使用 Uniapp 的时候,不需要手动配置路由,而是通过编写 pages.json 文件来配置页面路径和样式等信息。这一点与 Vue Router 的使用方式略有不同;
  • Uniapp 的路由跳转方法有些不同,例如 navigateTo、redirectTo、switchTab、reLaunch 等方法,这些方法都是针对不同场景的不同跳转方式。
  • 因此,Uniapp 和 Vue 在路由方面有相似之处,但是由于 Uniapp 的跨端特性和不同平台的差异,它们在具体实现和使用方式上也有些不同。


一. Uniapp路由的使用方式:
Uniapp 的路由使用方法分为两部分,一是在 pages.json 文件中配置页面路径和样式等信息,二是通过 uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch 等方法进行页面跳转。下面详细介绍一下这两部分的内容。

配置页面路径和样式
在 Uniapp 中,我们可以在 pages.json 文件中配置页面路径和样式等信息。这个文件默认位于项目的根目录下,它是一个 JSON 格式的配置文件,用于描述所有页面的路径、样式、配置等信息。例如:

  1. {
  2. "pages": [
  3. {
  4. "path": "pages/index/index",
  5. "style": {
  6. "navigationBarTitleText": "首页"
  7. }
  8. },
  9. {
  10. "path": "pages/detail/detail",
  11. "style": {
  12. "navigationBarTitleText": "详情页"
  13. }
  14. }
  15. ],
  16. "tabBar": {
  17. "list": [
  18. {
  19. "pagePath": "pages/index/index",
  20. "text": "首页",
  21. "iconPath": "static/tab-bar/home.png",
  22. "selectedIconPath": "static/tab-bar/home-selected.png"
  23. },
  24. {
  25. "pagePath": "pages/mine/mine",
  26. "text": "我的",
  27. "iconPath": "static/tab-bar/mine.png",
  28. "selectedIconPath": "static/tab-bar/mine-selected.png"
  29. }
  30. ]
  31. }
  32. }

  

上面的代码片段中,我们定义了两个页面,分别是首页和详情页,它们的路径分别是 pages/index/index 和 pages/detail/detail,同时还定义了这两个页面的导航栏标题。另外,我们还定义了一个名为 tabBar 的对象,表示底部导航栏的样式和配置信息。这个对象中包含一个名为 list 的数组,数组中的每个对象表示一个底部导航栏项。

跳转页面
在 Uniapp 中,我们可以通过 uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch 等方法进行页面跳转。这些方法都是基于页面路径进行跳转的,它们的区别在于跳转的方式和效果不同。例如:

  • uni.navigateTo:保留当前页面,跳转到应用内的某个页面。新打开的页面可以通过 uni.navigateBack 方法返回到原来的页面。
  • uni.redirectTo:关闭当前页面,跳转到应用内的某个页面。新打开的页面不可以通过 uni.navigateBack 方法返回到原来的页面。
  • uni.switchTab:关闭所有页面,跳转到应用内的某个页面。新打开的页面是底部导航栏中的一个页面。
  • uni.reLaunch:关闭所有页面,打开应用内的某个页面。

例如,以下代码示例演示如何通过 uni.navigateTo 方法跳转到详情页:

  1. // 在 index 页面中跳转到详情页
  2. uni.navigateTo({
  3. url: '/pages/detail/detail'
  4. })

  

上面的代码片段中,我们通过 uni.navigateTo 方法跳转到了详情页,其中 url 参数表示要跳转的页面路径。这个路径应该是 pages.json 文件中定义的页面路径,可以是相对路径或绝对路径。

另外,如果要在跳转时传递参数,可以在路径后面加上查询字符串,例如:

  1. // 在 index 页面中跳转到详情页,并传递参数
  2. uni.navigateTo({
  3. url: '/pages/detail/detail?id=123'
  4. })

  

在详情页中可以通过 this.$route.query.id 获取参数值。
除了以上方法之外,还可以使用 uni.navigateBack 方法返回上一个页面。例如:

  1. // 在详情页中返回上一个页面
  2. uni.navigateBack()

  

上面的代码片段中,我们调用了 uni.navigateBack 方法返回上一个页面。

二. vue中路由的使用方法

1. 安装Vue Router
在使用Vue.js的路由功能之前,需要先安装Vue Router。可以使用npm或者yarn安装:

  1. npm install vue-router
  2. # 或者
  3. yarn add vue-router

  

2. 创建路由
在Vue.js中,我们需要先创建一个路由实例,然后定义路由映射关系。路由实例可以通过Vue Router提供的Vue.use()方法进行创建:

  1. import Vue from 'vue';
  2. import VueRouter from 'vue-router';
  3. import Home from './views/Home.vue';
  4. import About from './views/About.vue';
  5.  
  6. Vue.use(VueRouter);
  7.  
  8. const router = new VueRouter({
  9. mode: 'history',
  10. routes: [
  11. {
  12. path: '/',
  13. name: 'home',
  14. component: Home
  15. },
  16. {
  17. path: '/about',
  18. name: 'about',
  19. component: About
  20. }
  21. ]
  22. });
  23.  
  24. export default router;

  

在上述代码中,我们首先引入了Vue.js和Vue Router模块,并使用Vue.use()方法注册Vue Router。接着,我们创建了一个路由实例,并定义了两个路由映射关系。其中,路由映射关系包括路由路径(path)、路由名称(name)和路由组件(component)。

3. 添加路由实例
在创建了路由实例后,我们需要将其添加到Vue.js的根实例中,以便在整个应用程序中使用路由功能。可以在main.js文件中进行添加:

  1. import Vue from 'vue';
  2. import App from './App.vue';
  3. import router from './router';
  4.  
  5. new Vue({
  6. router,
  7. render: h => h(App),
  8. }).$mount('#app');

  

在上述代码中,我们首先引入了Vue.js的根组件(App.vue)和路由实例(router),然后将路由实例作为根实例的一个选项进行添加。

4. 创建路由组件
在定义路由映射关系时,需要指定路由组件。路由组件是一个普通的Vue.js组件,用于渲染对应的路由页面。可以在components文件夹下创建路由组件,例如:

  1. <template>
  2. <div>
  3. <h1>About Page</h1>
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9. name: 'About'
  10. }
  11. </script>

  

在上述代码中,我们创建了一个名为About的组件,用于渲染关于页面。

5. 使用路由
在上述步骤完成后,就可以在Vue.js应用程序中使用路由了。可以在Vue.js组件中使用$route和$router来访问当前路由信息和导航功能,例如:

  1. <template>
  2. <div>
  3. <h1>{{ $route.name
  4. }}</h1>
  5. <p>Welcome to {{ $route.name }} page</p>
  6. <router-link to="/">Home</router-link>
  7. <router-link to="/about">About</router-link>
  8.  
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. name: 'App'
  14. }
  15. </script>

  在上述代码中,我们使用$route.name访问当前路由名称,并在页面中显示。同时,使用<router-link>标签实现页面之间的导航。to属性用于指定目标路由路径。 除了使用<router-link>标签进行导航,还可以使用$router.push()方法进行编程式导航。例如:

  1. this.$router.push('/about');

  

上述代码用于在当前页面中进行路由跳转,进入关于页面。

6. 使用路由守卫
Vue Router还提供了路由守卫功能,用于在导航过程中进行控制和过滤。可以使用beforeEach()方法实现全局路由守卫,例如:

  1. router.beforeEach((to, from, next) => {
  2. if (to.name === 'about' && !isAuthenticated) next({ name: 'home' })
  3. else next()
  4. })

  

在上述代码中,我们定义了一个全局路由守卫,用于在进入关于页面之前进行身份验证。如果当前用户没有登录,则自动跳转到主页。

除了全局路由守卫外,Vue Router还提供了其他几种路由守卫,例如beforeEnter()、beforeRouteEnter()和beforeRouteLeave()等,用于在特定路由进入或离开时进行控制和过滤。

总之,Uniapp 的路由使用方法与 Vue 的路由使用方法基本相似,都是通过配置文件和方法进行跳转,只不过在具体实现细节上有些不同。

原文链接:https://www.cnblogs.com/eminer/p/17240955.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号