使用路由模块来实现页面跳转的两种方式(router-link标签跳转和JS脚本跳转)
router-link标签跳转
router-link的底层逻辑是创建一个a标签,通过a链接进行跳转。分为带参数和不带参数跳转。
不带参数:
带参数:
JS脚本跳转(项目中常用)
借助router实例方法(push,replace,go等),通过编写JS脚本跳转。JS脚本跳转也分为带参数和不带参数跳转。
在vue中,可以通过$router访问路由实例。因此可以调用this.$router.push进行跳转。
(选项式API示例)
(组合式API示例)
组合式API方式需要先使用useRouter,useRoute方法。
vue-router的参数传递方式
(1)字符串方式
(将路由地址以字符串的方式来跳转,这种方法很简单,但是不能传递参数)
(2)对象方式
(主要目的是传递参数)分为两种方式:命名路由和查询参数
1)命名路由:在注册路由的地方通过name给路由命名。
传递参数时通过params传递,例:
这种传递方式在组件中,选项式API和组合式API的使用步骤略有不同,以下分别阐述:
选项式:1.先导入router组件,import router from ‘vue-router’
2.再通过this.$route.params获取
组合式:1.先导入 useRoute方法,import {useRoute} from 'vue-router'
2.useRoute().params.
2)查询参数:在路由地址后面带上参数,和传统的URL参数一致,传递参数必须用query,而且必须配合path来传递参数而不用name,目标页面接收传递的参数使用query.
这种传递方式在组件中,选项式API和组合式API的使用步骤略有不同,以下分别阐述:
选项式:1.先导入router组件,import router from ‘vue-router’
2.再通过this.$route.query获取
组合式:1.先导入 useRoute方法,import {useRoute} from 'vue-router'
2.useRoute().query.
vue-router配置子路由
常见需求示例:在首页顶部有一个用户头像,单击用户头像进入用户中心界面,在用户中心界面包含用户个人信息和用户设置等功能,在个人信息与用户设置间跳转,除了主体内容区域信息不一样外,还保留着用户中心的公共导航模块,这个时候路由结构就是两级的了,用户中心作为父级,个人信息和用户设置的内容区域是二级,这种情况就可以通过vue-router配置子路由的方式切换个人信息页面和用户设置页面。(嵌套路由示例)
第一步:创建一个项目
以Vue Cli 方式创建一个安装了vue-router的项目,改造App.vue根页面。
安装脚手架,创建项目,自定义配置,启动项目
1.npm install -g @vue/cli
2.vue create my-project
3.cd my-project
4.npm run serve
(关键代码及效果图)
第二步:创建单文件组件
功能实现逻辑(关键在于理清父子关系):创建了一个home.vue作为根组件的子组件,然后又创建了一个index.vue作为home.vue的子组件。最后创建了profile.vue和settings.vue作为index.vue的子组件。
1)在src/views下创建一个user-center文件夹和一个home.vue文件。在根页面放置一个</router-view>,其中home.vue的内容就会渲染到根页面的路由容器中。如图:
2)在user-center中创建三个单文件组件。
第三步:进行路由配置
index.vue是点击home.vue中的user路由跳转到的视图
跳转之后的视图:(默认显示个人信息页面)
点击用户设置,页面展示图:
设置404页面
跟上述步骤差不多,直接看图吧
最后运行项目,随便访问一个地址,可以看到页面跳转到了404页面。