svelte + Framework7的路由跳转携带参数2种解决方案

A传参数到B页面，都会用到参数传值之类的，

方案一：

A页面代码：

export let f7router;

f7router.navigate("/login", {
     props: {
         phone: "13000001111",
         pass: "123456",
     },
});

通过props的方式传值过去，这个看起来没啥问题

B页面代码：

export let phone;
export let pass;

console.log(phone,pass);

上面是方案一，通过props传值但是会有些问题，个人原因啊，在开发模式中，会出现很多的警告，特烦的那种，每次进页面都有，（测试过打包后，没有警告，正常使用放心用）不过还有第二个方案

---

方案二

A页面代码

export let f7router;

f7router.navigate({
   name: "login",
   query: {
       phone: "13311112222",
       pass: "123456",
    },
});

是不是注意到，跟第一个方案不同，这个传参是通过路由的query方式传递

路由需要加上 name参数如下：

import login from "./view/login.svelte";

export default [
    { name: 'login', path: '/login', component: login },
]

第一个方案的路由跳转使用的是path的地址，第二个方案可以直接检索name的参数,当然第二个参数也可以使用path

B页面代码

export let f7route;

export let phone = f7route.query.phone;
export let pass = f7route.query.pass;

console.log(phone,pass);

这2个方案都是 Framework7的单页版，页面跳转带参数，第二个方案调试的时候，警告会少一些目前我用的是第二个方案，，，，嗯嗯嗯嗯嗯就这些吧！

---

2021年9月3日15:11:16

学习遇到一个问题，就是外部的js无法跳转内部的路由，因为没有

export let f7route;  这个玩意儿

找了好久的文档压根没有，去翻论坛，翻了好久找到了一个方法，外部js跳转内部页面的

使用起来还是很简单的

import { f7 } from "framework7-svelte";

// f7.view.main.router.navigate(path);


//  这样在自定义类可以使用了，根据需求自己包装一下吧
    /**
     * @description 跳转页面
     * @example 无
     */
    href: (path = true, state = false) => {
        if (path === true) {
            return f7.view.main.router;
        } else {
            if (state === true) {
                f7.view.main.router.navigate(path, {
                    reloadCurrent: true,
                    reloadAll: true,
                });
            } else {
                f7.view.main.router.navigate(path);
            }
        }
    },

更多的请参考官方的doc吧，我自己也是第一使用，有啥问题的留言告诉我

官方文档：跳转地址