Vue2.0通过二级路由实现页面切换

vue2.0通过二级路由实现页面切换

需求分析：以下歌手列表（singer.vue）页中，点击列表跳转到歌手详情页（singer-detail.vue）。

实现方法：使用二级vue-router实现。

vue-router配置：

设置二级路由后，需要再singer.vue中设置router-view，用于挂载singer-detail.vue的内容，关键代码用红框标出。

点击歌手后的运行结果：（注：singer-detail.vue只是一个简单的fixed的100%高度和宽度的页面，仅用于测试，暂未开发，具体UI可自己实现。）

根据id区分不同歌手，画红线处为歌手id，对应于路由的:id

Vue2.0通过二级路由实现页面切换相关推荐

Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换
vue2.0使用嵌套路由实现页面跳转切换/公用一级菜单控制页面内容切换/routes配置children demo需求分析: 图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在 ...
vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解
一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入v ...
vue2.0中的路由传值
vue2.0中的路由传值传参的三种基本用法第一种字符串拼接 //第一步:路由表 src/router/index.js { path: '/user/:userId?', // 传参第一步:在路由 ...
微信小程序页面路由实现页面切换
实现效果实现代码实现代码与vue十分相似 //.wxml <view class="food_tab"><view ...
Vue2.0实现炫酷的主题切换功能
效果展示实现原理通过写多套样式文件,在项目编译完成后动态更改link标签引入实现过程首先如果需要多套主题,必须要有多套样式文件,而样式文件又有很多写法,下面分享一下我的写法主题css 首先我 ...
Flutter学习日记之使用路由进行页面切换
本文地址:https://blog.csdn.net/qq_40785165/article/details/116900126,转载需附上此地址大家好,我是小黑,一个还没秃头的程序员~~~ 你多学 ...
vue2.0兼容ie浏览器（页面加载及导出问题）
最近项目开发中遇到需要用到ie浏览器的情况,因为是内网开发,大致记录下兼容过程. 问题1:ie11浏览器页面无法加载首先遇到的问题是谷歌浏览器运行无问题,控制台也不报错,但是ie11浏览器就打不开, ...
Vue 路由配置和二级路由配置
Vue 路由配置和二级路由配置路由配置二级路由默认首个页面二级路由导致一级路由下的高亮失效路由配置我们初始化我们的Vue项目后,打开工程目录src/router下的index.js.我们可 ...
Vue一级路由与二级路由/路由重定向
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

Vue2.0通过二级路由实现页面切换

Vue2.0通过二级路由实现页面切换相关推荐

最新文章

热门文章