路由-标签切换格式2

最新推荐文章于 2023-09-21 11:21:41 发布
最新推荐文章于 2023-09-21 11:21:41 发布
阅读量173 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/c_hjf/article/details/78293101

(主文件)

<!DOCTYPE html>

<html ng-app="BShop">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"/>
    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>
    <link href="css/main.css" rel="stylesheet"/>
    <title>书店</title>
    <script type="text/javascript">
        var BShop = angular.module("BShop", ["ionic"]);
        BShop.config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider.state("home", {
                url: "/home",
                views: {
                    "view-home": {
                        templateUrl: "views/home/home.html",
                        controller: "HomeCtrl"
                    }
                }
            }).state("cart", {
                url: "/cart",
                views: {
                    "view-cart": {
                        templateUrl: "views/cart/cart.html",
                    }
                }
            }).state("mine", {
                url: "/mine",
                views: {
                    "view-mine": {
                        templateUrl: "views/mine/mine.html",
                    }
                }
            });

            $urlRouterProvider.otherwise("home");
        });

        BShop.controller("HomeCtrl", function ($scope, $ionicSideMenuDelegate) {
            $scope.toggleLeft = function () {
                $ionicSideMenuDelegate.toggleLeft();
            }
        });
    </script>
</head>
<body>
<ion-nav-bar></ion-nav-bar>

<ion-side-menus>

    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios"></ion-nav-bar>
        <ion-nav-view animation="slide-left-right">

            <ion-nav-view name="view-home"></ion-nav-view>

        </ion-nav-view>
    </ion-pane>

    <ion-side-menu side="left" class="mine">

        <header class="bar bar-header bar-stable">
            <h1 class="title">个人中心</h1>
        </header>

        <ion-content class="has-header">
            <div class="avatar">
                <img src="img/mine_avatar.jpg" width="80px" height="80px"/>

                <p>姓名</p>
            </div>

            <div class="list">
                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-clipboard"></i>
                    我的订单
                    <i class="icon ion-ios-arrow-right"></i>
                </a>

                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-star"></i>
                    我的收藏
                    <i class="icon ion-ios-arrow-right"></i>
                </a>

                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-gear-a"></i>
                    设置
                    <i class="icon ion-ios-arrow-right"></i>
                </a>
            </div>
        </ion-content>

    </ion-side-menu>
</ion-side-menus>

<ion-tabs class="tabs-positive tabs-icon-top">
    <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="home">
    </ion-tab>

    <ion-tab title="购物车" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="cart">
        <ion-nav-view name="view-cart"></ion-nav-view>
    </ion-tab>

    <ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="mine">
        <ion-nav-view name="view-mine"></ion-nav-view>
    </ion-tab>
</ion-tabs>
</body>

</html>

(独立分页)

<ion-view title="购物车" class="cart">
    <ion-content>
    </ion-content>
</ion-view>

snow箴言
关注
Vue路由切换页面不更新问题解决方案
10-15
这个问题通常出现在使用vue-router进行页面路由切换时，尤其是当路由切换所涉及的组件相同时。这种情况下，Vue不会重新创建组件实例，而是复用已有的组件，从而导致数据无法更新，用户界面没有反映预期的变化。 ...
路由标签之router-view理解
热门推荐
qq_40196248的博客
09-18 2万+
Vue 路由中的 <router-view/> 是用来承载当前级别下的子级路由的一个视图标签，此标签的作用就是显示当前路由级别下一级的页面。 例如： #路由引入 desk.vue 此页面为基础页面，所有页面引入，负责系统的整体布局。 #desk页面分割完成后，将<router-view/>标签写入到实际渲染区域。 #视系统布局而定，左右布局在右侧，上中下布局在中间。 sys-router.js desk.vue 页面渲染部分 上面路由的 path="/i..
VantUI封装自定义Tabbar路由跳转
明知山
08-30 1万+
效果图 点击不同的图标切换不同路由，并且切换自定义图片 因为这是个底部栏，需要把它封装成组件，我这里有三个底部栏地址，就需要被引到三个地方 组件tabbar.vue <template> <van-tabbar v-model="active" active-color="red"> <van-tabbar-item v-for="(item,inde...
vue+elementUI el-tabs标签路由切换
m0_57071129的博客
07-27 1万+
注意这里如果你刷新只想保留首页，那么mounted中，你只需写else中的代码。1.实现tab组件pageTab.vue，我这里是拆的组件。如果刷新想，保留首页和当前路由页，ifelse都要写（）配置路由页面我这里是动态路由，所以比较简短。需要使用tab组件的地方。...
路由（一）路由-组件切换-重定向和按钮高亮设置
weixin_44867717的博客
02-09 1012
路由-什么是 问：什么是路由？ 答：路由是一个js功能模块，用于解决做个组件切换显示问题的，本身对组件切换的各个技术有做封装，是更成熟组件切换解决方案，使用起来更高级、方便。 使用路由后，原生的 #锚点超链接、component占位符标签、window.onhashchange、window.location.hash就看不到了 路由：就是浏览器地址栏#锚点信息 与 业务组件的对应关系 内部有...
学习vue-element-admin问题之切换路由刷新页面问题
顺其自然~专栏
06-11 1476
刚把前端路由生成好，但在切换路由(或tab标签)时，会刷新之前打开过的页面 后面发现是组件里面的name属性值和生成路由的name属性值不一样导致的
Vue3+element-plus切换标签页时数据保留问题
ZH
09-21 945
记录一次切换标签页缓存失效问题，注册路由时。不一致可能会导致缓存失效。
element-admin切换标签页面刷新
songshuguowang的专栏
05-16 1万+
在使用element-admin模板开发时发现，切换标签时未保存页面的操作内容 在多番验证下发现问题 路由配置时name与页面设置的name 不匹配导致，因为模板中默认是会缓存tag页面的，也就是noCache参数默认就是false ...
vue-admin-template路由切换组件刷新
Mr-Bean的博客
08-14 999
问题： 在使用vue-admin-template进行页面搭建时发现每次路由切换都会调用created方法进行页面刷新。查看文档得知，需要开启缓存，但在实际操作时问题再次出现。 添加页面缓存： 首先是在路由中：(src/router/index.js) 对需要添加缓存的页面对应的路由在meta中添加：keepAlive: true 一个完整的页面路由如下: { path: '/resQuery', component: Layout, redirect: '/resQuery/res
Vue-elementui-admin 快捷标签导航栏解决切换路由不刷新问题
FunctionJon的博客
11-21 1908
首先找到 @/layout/components/AppMain.vue 然后移除 keep-alive。如上，问题解决了，按文档来说，直接使用keep-alive也是有弊端的，但是问题不大，好歹解决问题了。
解决vue-router 切换tab标签关闭时缓存问题
10-15
在Vue.js应用中，使用Vue Router进行页面导航时，可能会遇到一些关于页面缓存的问题，尤其是在涉及切换Tab标签时。本文将深入探讨如何解决Vue Router切换Tab标签时关闭页面仍保持缓存的状态。 首先，Vue Router中的...
解决vue中el-tab-pane切换的问题
10-15
在Vue开发过程中，Element UI库提供了丰富的UI组件，其中`el-tabs`组件用于实现标签页切换功能。在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题...
Vue 路由切换时页面内容没有重新加载的解决方法
10-18
在使用Vue.js开发单页应用程序（SPA）时，页面组件在路由切换时通常会重新渲染以显示新的内容。但有时候，用户可能会遇到路由切换时页面内容没有更新的问题。这通常与Vue的生命周期钩子函数和keep-alive组件使用不当...
转化问题学生的六种激励法.doc
最新发布
08-10
转化问题学生的六种激励法.doc
一个基于Java编写的聊天软件，支持好友列表，窗口多开，JSP Web注册账户 分Client端和Server端
08-10
一个基于Java编写的聊天软件，支持好友列表，窗口多开，JSP Web注册账户。分Client端和Server端。
安全设计“左移”：DevSecOps 成为编码起点.doc
08-10
安全设计“左移”：DevSecOps 成为编码起点.doc
酒店管理系统概要设计说明书.doc
08-10
酒店管理系统概要设计说明书.doc
幼儿园助理工作总结.doc
08-10
幼儿园助理工作总结.doc
el-select-v2 路由切换
04-02
### 关于 `el-select-v2` 在路由切换时的行为分析 #### 组件状态保留问题 当使用 `el-select-v2` 并在路由切换过程中遇到状态丢失或不一致的情况时，这通常是因为 Vue 的组件销毁机制所致。每当路由发生变化时，默认情况下 Vue 会卸载当前的组件并重新加载新的组件实例。如果目标组件未被缓存，则其内部状态会被重置[^1]。 为了实现路由切换时的状态保留，可以利用 `<keep-alive>` 标签来缓存特定的组件实例。通过这种方式，即使用户离开该页面再返回，之前的选择项和其他交互数据仍然能够保持不变。 ```html <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> ``` 上述代码片段展示了如何结合路由元信息 (`meta`) 来控制哪些视图应该被缓存。只有设置了 `meta.keepAlive=true` 的路由才会进入 `<keep-alive>` 缓存范围[^4]。 #### 初始化行为调整 对于某些场景下希望手动初始化而非依赖默认值的情形，可以在生命周期钩子函数中执行自定义逻辑。例如，在 `mounted()` 或者 `activated()` 中设置初始选项列表： ```javascript export default { data() { return { selectedValue: null, optionsList: [] }; }, activated() { this.fetchOptions(); // 当组件激活时拉取最新数据源 }, methods: { fetchOptions() { setTimeout(() => { this.optionsList = [ { value: 'option1', label: 'Option One' }, { value: 'option2', label: 'Option Two' } ]; }, 1000); } } }; ``` 这里需要注意的是，由于 `el-select-v2` 是基于虚拟滚动技术优化的大规模选择器，因此动态更新选项数组可能触发性能瓶颈。务必谨慎处理异步请求与 DOM 更新之间的关系[^3]。 #### 解决属性突变警告 假如发现存在类似于 `"Unexpected mutation"` 这样的错误提示，那可能是父级传递给子组件的数据结构发生了非法更改操作。按照单向数据流原则，prop 不应直接修改而是借助事件回调通知上级改变原始变量副本后再同步下来。 以下是修正后的父子通信模式示范： ```html <!-- Parent Component --> <template> <ChildComponent :formData="parentData" @update-form-data="handleUpdate"/> </template> <script> export default { data() { return { parentData: {} }; }, methods: { handleUpdate(updatedFields) { Object.assign(this.parentData, updatedFields); } } } </script> ``` ```html <!-- Child Component --> <template> <el-select-v2 v-model="localFormData.fieldName"> <!-- Options Content --> </el-select-v2> </template> <script> export default { props: ['formData'], computed: { localFormData: { get() { return this.formData; }, set(newValue) { const changedPart = {}; changedPart['fieldName'] = newValue; this.$emit('update-form-data', changedPart); } } } } </script> ``` 这样既满足了响应式需求又规避掉潜在的风险点。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值