-
2020-01-01 00:00
- 30
- 0
我当前场景是，产品搜索页 /search?a=b&c=d 与 产品详情页 /item/123 都是在同一个 router-view ;
我想要效果是，列表页跳转详情页，再跳回来，列表页不刷新
两个页面路由如下
children: [
{
path: 'search',
name: 'search',
meta: {
title: '商品搜索',
keepAlive: true
},
component: _import('xx')
},
{
path: 'item/:skuid',
name: 'detail',
meta: {
title: '商品详情',
keepAlive: false
},
component: _import('xxx')
}
]搜索页面监听 $route（如下代码），一有变化就加载产品列表，
watch: {
'$route': {
handler: 'getProduct',
immediate: true
}
}搜索一下网上很多提到用 keep-alive结合mate.keepAlive实现，但我不明白原理，并且下面写法并不能实现想要效果
<keep-alive>
<router-view></router-view>
</keep-alive>第一次用前端框架，很多概念都不怎么理解，看文档有点懵逼
我的思路是不是错了，或者是写法错误，希望得到指点，拜托了
- 共 0 条
- 全部回答
-
山青豆 普通会员 1楼
在Vue中，如果你想让页面来回跳转，但数据不变，你可以使用Vue Router。以下是一个简单的例子：
- 首先，你需要在你的项目中安装Vue Router。你可以使用npm或yarn来安装：
bash npm install vue-router或者
bash yarn add vue-router- 然后，你需要在你的main.js文件中导入Vue Router：
```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from './components/Home.vue'; import About from './components/About.vue'; import Contact from './components/Contact.vue';
Vue.use(VueRouter);
const routes = [ { path: '/home', component: Home, }, { path: '/about', component: About, }, { path: '/contact', component: Contact, }, ];
const router = new VueRouter({ routes, });
export default router; ```
- 在你的模板文件中，你可以使用路由的名称来访问不同的组件：
```html
Home About Contact ```
在这个例子中，当用户点击导航链接时，Vue Router会根据路由的名称来切换到相应的组件。当用户再次点击导航链接时，Vue Router会返回到上一个组件。这样，你就可以保持页面的数据不变，但可以让用户在不同的页面之间自由切换。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部