当前位置: 首页 > news >正文

Vue Vue-route (4)

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue-route 编程式导航和几种路由

 

目录

编程式导航 

详情组件

创建组件

设置路由

电影列表

传参

另一种方式

动态路由

命名路由

别名

总结


编程式导航 

点击电影列表 跳转电影详情

详情组件

创建组件

在views中创建DetailView.vue组件页面。

示例如下:

设置路由

在router/index.js中引入详情页面并设置详情路由。

示例如下:

import Detail from '@/views/DetailView'Vue.use(VueRouter) // 注册路由插件// 配置表
const routes = [{path: '/films',name: 'films',component: Films,children: [{path: '/films/nowplaying',component: NowPlaying},{path: '/films/comingsoon',component: ComingSoon},{path: '/films',redirect: '/films/nowplaying'}]},{path: '/detail',name: 'detail',component: Detail},

 

电影列表

在films/NowPlaying.vue页面渲染电影列表。

示例如下:

<template><div>nowplaying<ul><li v-for="data in datalist" :key="data"><router-link to="/detail">{{data}}</router-link></li></ul></div>
</template>
<script>
export default {data () {return {datalist: ['春眠不觉晓', '处处闻啼鸟', '夜来风雨声', '花落知多少']}}
}
</script>
传参

设置跳转,使用编程式导航。

示例如下:

<template><div>nowplaying<ul><!-- <li v-for="data in datalist" :key="data"><router-link to="/detail">{{data}}</router-link></li> --><li v-for="data in datalist" :key="data" @click="handleChangePage()">{{data}}</li></ul></div>
</template>
<script>
export default {data () {return {datalist: ['春眠不觉晓', '处处闻啼鸟', '夜来风雨声', '花落知多少']}},methods: {handleChangePage () {// 编程式导航location.href = '#/detail'}}
}
</script>
另一种方式

另一种方式实现跳转。示例如下:

methods: {handleChangePage () {// 编程式导航// location.href = '#/detail'this.$router.push('/detail')}}

 

动态路由

列表项有很多,但详情只有一个,需要根据选择id,渲染相应详情。

所以需要传递相应id,故在连接中增加id参数。

示例如下:

<template><div>nowplaying<ul><!-- <li v-for="data in datalist" :key="data"><router-link to="/detail">{{data}}</router-link></li> --><li v-for="data in datalist" :key="data" @click="handleChangePage(data)">{{data}}</li></ul></div>
</template>
<script>
export default {data () {return {datalist: ['春眠不觉晓', '处处闻啼鸟', '夜来风雨声', '花落知多少']}},methods: {handleChangePage (id) {// 编程式导航// location.href = '#/detail'this.$router.push(`/detail/${id}`)}}
}
</script>

 

动态路由配置

在router/index.js中修改原有的详情路由。

示例如下:

{path: '/detail/:myid', // 动态路由name: 'detail',component: Detail}

接收参数

在详情组件内获取参数。

通过生命周期中的created函数在组件创建时获取参数。

示例如下:

控制台查看打印结果

 

修改获取参数

示例如下:

<script>export default {created () {// 当前匹配的路由console.log('created', this.$route.params.myid)// axios 利用 id发请求到详情接口,获取详情数据,布局页面}
}
</script>

 

命名路由

对路由进行命名,就可以通过命名路由直接跳转。

{path: '/detail/:id', // 动态路由name: 'detail', // 命名路由component: Detail},

命名路由跳转

      // 1 通过路径跳转this.$router.push(`/detail/${id}`)// 2 通过命名路由跳转this.$router.push({name: 'detail',params: {id}})

别名

路由a别名是b,当用户访问b时,URL会保持为b,但是路由匹配则为a,

就像用户访问a一样。

路由配置,示例如下:

{path: '/cinemas',name: 'cinemas',alias: '/ci',component: Cinemas}

“别名”的功能让你可以自由地将UI结构映射到任意的URL,

而不是受限于配置的嵌套路由结构。

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue-route 编程式导航和几种路由

http://www.dtcms.com/a/272213.html

相关文章:

  • Ubuntu基础(Python虚拟环境和Vue)
  • 堆的应用(讲解超详细)
  • Uniapp中的uni.scss
  • 2025.07.09华为机考真题解析-第一题100分
  • 【VLAs篇】05:RDT模型结构和流程分析
  • HTML颜色定义
  • 深入了解Modbus TCP:工业通信的“通用语言”
  • Docker-构建镜像并实现LNMP架构
  • C语言 | 函数核心机制深度解构:从底层架构到工程化实践
  • 西电考研录取:哪些省份考研上岸西电更容易?
  • PyTorch Tensor 的创建与操作入门
  • 低版本hive(1.2.1)UDF实现清除历史分区数据
  • 1.1.1数据类型与变量——AI教你学Django
  • 基于Uniapp+MySQL+PHP的景区多商户小程序源码系统 带完整的搭建指南
  • vue引入应用通义AI大模型-(一)前期准备整理思路
  • idea如何打开extract surround
  • 【CPU】不同核数下的翻译
  • hbuilder开发app记录
  • ReaLTaiizor:WinForms 界面设计利器
  • 《未来已来:当人类智慧遇上AI智能体》
  • 【WPF实战】MVVM中如何从数据模型反查自定义控件实例(ImageView + Halcon)
  • 学习开发之条件函数
  • 如何用 LangChain 自定义 Chat Model —— 测试工程师实践指南
  • Maven生命周期:构建流程深度解析
  • eVTOL动力测试台架气动干扰分析与应对措施
  • TestCafe ➜ Playwright fixture 架构迁移指南
  • 上位机与Modbus的32位数据交互
  • 嘿嘿嘿嘿嘿
  • C++---多态
  • Camera2API笔记