NativeScript Vue Router

nativescript-vue-router-extended

NativeScript Vue Router 将更简单的路由处理带给移动应用，其 API 与 Vue Router 的 Web 版本兼容。

如果在功能方面发现任何问题或有任何进一步的需求，请提交问题或提出 PR。

目录

• 功能
• 先决条件 / 要求
• 安装
• 用法 & 示例
• 页面新钩子
• TypeScript
• 与 Web 的 API 差异
• 故障排除

功能

• 移动和 Web 共享相同的钩子和守卫
• 额外的动作派发器，用于在更改路由时自动将动作派发到存储中
• Vue-Router 4 API 兼容性
• NativeScript-Vue 兼容
• 开箱即用的 TypeScript 支持

先决条件 / 要求

插件正常运行需要 Nativescript 7.1+。它可能在之前的 NS6 上运行，尽管插件不再官方支持 NativeScript 6。

安装

ns plugin add router-vue-native

or

npm install router-vue-native

or

yarn add router-vue-native

用法 & 示例

要使用此插件，您需要导入它并使用 createRouter() 函数初始化路由。支持全局和组件级别的 Vue-Router 钩子和守卫。

Vue 3 示例

将路由添加到 Vue 应用中

// app.ts

import { createApp } from 'nativescript-vue';
import App from './App.vue';
import {router} from "~/plugins/router";
const app = createApp(App);
app.use(router)
app.start();

创建路由

// /plugins/router.ts

import {createRouter} from "router-vue-native";
import Home from "~/views/Home.vue";
import Login from "~/views/Login.vue";

const routes = [
    {
        path: "/",
        component: Home,
    },
    {
        path: "/login",
        component: Login,
    }
];

const router = createRouter(
    {routes},
);

export {
    router
}

定义应用程序的默认路径

// App.vue
<template>
  <RouterView defaultRoute="/login"></RouterView>
</template>

// OR

<script setup lang="ts">
const getDefaultRouteExample = () => {
  if (isLoginUser) {
    return "/login"
  } else {
    return "/"
  }
}
</script>
<template>
  <RouterView :defaultRoute="getDefaultRouteExample"></RouterView>
</template>

在 setup 模板中使用

<script lang="ts" setup>
import {useRouter} from "router-vue-native";

// get router
const router = useRouter();

const onNavigete = () => {
  // navigate
  router.push("/your_path")
}

</script>

Vue 2 和完整选项

import Vue from "nativescript-vue";
import { createRouter } from "nativescript-vue-router-extended";

// Initialize Example Routes
import Home from "./pages/Home.vue";
import Login from "./pages/Login.vue";

const routes = [
  {
    path: "/",
    component: Home,

    // Optional
    meta: {
      isVertical: true,
      // Example actions to dispatch automatically when page is visited
      // Remember that you need to implement actions in your Vuex store
      store: {
        // Call action to hide navigation buttons
        showNavigationButtons: false,

        // Call "showMovies" action in "categories" module with payload "all"
        "categories/showMovies": "all",

        // Call action without payload
        showNavigationButtons: null,
      },
    },
    {
        path: "/login",
        component: Login,
    }

    // Optional, per route guards are supported
    // More info: https://next.router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard
    beforeEnter: (to, from) => {
      if (to.props.passUser) {
         // Continue navigation
         return true;
      }

      // Reject the navigation
      return false;
    },
  },
];

// Initialize Router
// Vue-Router settings are in 1st argument. 2nd one is used for extra NativeScript related settings
const router = createRouter(
  { routes },
  {
    // Optional settings below

    // Set first page to redirect to when there's no page to redirect back to
    routeBackFallbackPath: "/login",

    // Do something straight before navigation or adjust NS routing settings
    routeToCallback: (to, options) => {
      // For example, change page navigation transition for the vertical on iOS
      if (to.meta.isVertical) {
        options.transition = {
          name: "fade",
        };
      }
    },

    // Do something straight before navigation or adjust NS routing settings
    routeBackCallback: (_to, options) => {
      // Do something...
    },

    // Set a custom logger (console.log by default)
    logger: console.log,

    // Set custom frame, by default it's taken from @nativescript/core/ui/frame
    frame: Frame,
  }
);

// Register a global guard (optional)
// You can also use global router.beforeResolve guard and router.afterEach hook
router.beforeEach((to) => {
  // For example, verify per route access rules
  if (!canAccessRoute(to)) {
    return false;
  }

  return true;
});

// From now on you can access this.$router, this.$routeBack and special this.$routeTo inside of the components, example:
this.$routeTo("/movies", {
  // Clear History is a NativeScript setting
  clearHistory: true,
  
  // Route inside of custom Frame
  frame: "myFrameId",

  // Pass props to the page
  props: {
    movieId: 12,
  },
});

页面新钩子

您可以直接在特定页面上使用钩子。目前不建议在混入或组件内部使用它们。以下是一个示例

<template>
    <Page>
    </Page>
</template>

<script>

export default {
    name: 'movies',

    beforeRouteEnter(to, from, next) {
        // Do something before to enter to the route
        next((vm) => {
            // Do something once navigation is done
            // Instead of `this`, use `vm`
        });
    },

    beforeRouteLeave() {
        // Do something before to leave the route
        // You can use `this` inside of this hook
    },

    beforeRouteUpdate() {
        // Do something before to leave the route
        // before redirecting to another route with same path
        // You can use `this` inside of this hook
    },

    mounted() {
       // Output current route object with name, path etc.
       console.log(this.$route);
    },
};
</script>

TypeScript 支持

如果您需要 TS 支持，但出于某种原因在项目中自动检测不到，您可以使用 typings/shims.vue.d.ts 在 .vue 文件中提供正确的支持。您可以在您的 shims.vue.d.ts 文件中指定它（注意！请确保路径相对于您的 node_modules 目录）

/// <reference path="./node_modules/nativescript-vue-router-extended/typings/shims-vue.d.ts" />

与 Web 的 API 差异

Vue Router 兼容性

此插件旨在与 Vue Router 3+ 和 Vue Router 4+ 兼容。两者都应易于支持。请参阅 Vue Router 文档 以获取更多信息。

DOM 及相关钩子

存在一些限制，例如缺少DOM可访问性和相关钩子和守卫。

RouterLink 组件

由于性能原因，缺少组件。

向页面传递属性

所有属性都会自动传递到组件中。因此，您不需要在路由列表中使用 props: true。

元数据调度器

一个附加选项，允许您使用 meta.store 对象直接从路由列表向Vuex存储调度动作。要使用它，您可能需要在注册Vue存储后定义 Vue.prototype.$store = store;。

许可证

Apache许可证版本2.0，2004年1月

故障排除

请提交一个问题。您可以使用模板，但这不是必需的。只需简单地写下您的问题，这样我们就可以尝试重现并修复它。