详解uniapp和vue在路由方面的不同和联系

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 格式的配置文件，用于描述所有页面的路径、样式、配置等信息。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tab-bar/home.png",
        "selectedIconPath": "static/tab-bar/home-selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/tab-bar/mine.png",
        "selectedIconPath": "static/tab-bar/mine-selected.png"
      }
    ]
  }
}

上面的代码片段中，我们定义了两个页面，分别是首页和详情页，它们的路径分别是 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 方法跳转到详情页：

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

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

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

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

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

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

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

二. vue中路由的使用方法

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

npm install vue-router
# 或者
yarn add vue-router

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

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

export default router;

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

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

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

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

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

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

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

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

<template>
  <div>
    <h1>{{ $route.name
}}</h1>
<p>Welcome to {{ $route.name }} page</p>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

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

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

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

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

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

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

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

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

详解uniapp和vue在路由方面的不同和联系

添加新评论

最新文章

最近回复

分类

归档

其它