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

左手的ㄟ右手 2024-03-16 21:22 49阅读 0赞

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

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>// 在 index 页面中跳转到详情页</code> <code>uni.navigateTo({ </code> <code>&nbsp;&nbsp;</code><code>url:&nbsp;</code><code>'/pages/detail/detail'</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>// 在 index 页面中跳转到详情页，并传递参数</code> <code>uni.navigateTo({ </code> <code>&nbsp;&nbsp;</code><code>url:&nbsp;</code><code>'/pages/detail/detail?id=123'</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>// 在详情页中返回上一个页面</code> <code>uni.navigateBack()</code> </td> 
 </tr> 
 </tbody> 
</table>

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

**二. vue中路由的使用方法**

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>npm install vue-router</code> <code># 或者</code> <code>yarn add vue-router</code> </td> 
 </tr> 
 </tbody> 
</table>

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

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>import</code>&nbsp;<code>Vue from&nbsp;</code><code>'vue'</code><code>;</code> <code>import</code>&nbsp;<code>App from&nbsp;</code><code>'./App.vue'</code><code>;</code> <code>import</code>&nbsp;<code>router from&nbsp;</code><code>'./router'</code><code>;</code> <code>new</code>&nbsp;<code>Vue({ </code> <code>&nbsp;&nbsp;</code><code>router,</code> <code>&nbsp;&nbsp;</code><code>render: h =&gt; h(App),</code> <code>}).$mount(</code><code>'#app'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>&lt;template&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;h1&gt;About Page&lt;/h1&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&lt;/template&gt;</code> <code>&lt;script&gt;</code> <code>export</code>&nbsp;<code>default</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;</code><code>name:&nbsp;</code><code>'About'</code> <code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

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

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

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>this</code><code>.$router.push(</code><code>'/about'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>router.beforeEach((to, from, next) =&gt; { </code> <code>&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(to.name ===&nbsp;</code><code>'about'</code>&nbsp;<code>&amp;&amp; !isAuthenticated) next({ name:&nbsp;</code><code>'home'</code>&nbsp;<code>})</code> <code>&nbsp;&nbsp;</code><code>else</code>&nbsp;<code>next()</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

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

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

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