Vue3.x动态路由、命名路由和编程式导航

1.动态路由的定义和使用

两种方法：

1.路由中的动态传参以 : 进行声明，冒号后面跟的是动态参数名（path: 'apple/:mid'），通过{{ $route.params.mid }}进行接收

2.声明属性props:true，选项，以props的形式接收动态路由中的参数

{path: '/fruit',component: MyFruit,//子路由重定向redirect: '/fruit/apple/:mid',//声明props:true，选项，以props的形式接收动态路由中的参数props: true,children: [//路由中的动态传参以 : 进行声明，冒号后面跟的是动态参数名{ path: 'apple/:mid', component: MyApple, props: true },{ path: 'orange/:mid', component: MyOrange, props: true }]},

<template><div class=""><h3>水果-------{{ $route.params.mid }}</h3><p>---{{ mid }}</p><router-link to="/fruit/apple/1" >苹果</router-link><router-link to="/fruit/orange/2" >橘子</router-link><hr /><router-view class="fruit-router"></router-view></div>
</template><script type="text/ecmascript-6">
export default {name: 'MyFruit',props: ["mid"]
}
</script>

2.编程式导航

this.$router.push() --- 通过匹配path路径进行条装

this.$router.go(-1) --- 返回上一级

<template><div class=""><h3>home组件</h3><!-- 编程式导航的应用 --><button @click="goApple">跳转到苹果页面</button><button @click="goBack">回退</button></div>
</template><script type="text/ecmascript-6">
export default {name: 'MyHome',data () {return {}},methods: {goApple () {//通过匹配path路径进行条装this.$router.push('/fruit/apple/1')},goBack () {//回退一个页面this.$router.go(-1)}},components: {}
}
</script>

3.命名路由

一、声明name属性，为路由进行命名

{path: '/fruit',component: MyFruit,//子路由重定向redirect: '/fruit/apple/:mid',//声明props:true，选项，以props的形式接收动态路由中的参数props: true,children: [//路由中的动态传参以 : 进行声明，冒号后面跟的是动态参数名//命名路由，声明name属性{ path: 'apple/:mid', component: MyApple, props: true, name: 'apple' },{ path: 'orange/:mid', component: MyOrange, props: true, name: 'orange' }]},

使用命名路由进行跳转

 <!-- 通过命名路由跳转， params声明要传递的参数 --><router-link :to="{ name: 'orange', params: { mid: 2 } }" @click="getRouter">橘子</router-link>

二、通过编程式导航运用命名路由

goApple (id) {//通过命名路由进行编程式导航this.$router.push({ name: 'orange', params: { mid: id } })
},

Vue3.x动态路由、命名路由和编程式导航相关推荐

vue-router详尽：编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航... 通俗理解编程式导航 ...
Vue.js-Day05【安装路由（vue-router）、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.单页面应用 1.1.多页面应用 1.2.单页面应用 1.3.vue-router 2.安装vue-rout ...
Vue-router 使用编程式导航多次执行会报错NavigationDuplicated的解决方法
路由跳转有以下两种方式: 1.声明式导航: router-link,需要to属性,可以实现路由的跳转 2.编程式导航: 利用的是组件的实例 $route.push|replace 方法,可以实现路由的 ...
vue编程式导航，命名路由
//使用 window.location.href 的形式,叫做编程式导航绑定事件的形式 <template><div class="goods-item" ...
vue编程式导航跳转到当前路由多次执行抛出NavigationDuplicated: Avoided redundant navigation to current location:
为什么? push方法会返回一个Promise对象,内部会进行跳转成功或失败的回调解决方法只需在push方法末尾传递两个成功和失败的回调函数,可以捕获到当前的错误,可以解决.但是此种方法治标不治本 ...
vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...
前端笔记(11) Vue3 Router 编程式导航 router.push router.replace
什么是编程式导航? 在上篇博客Vue3 Router 监听路由参数变化中,我们使用 <router-link> 创建 a 标签来定义导航链接: <router-link to=&qu ...
031_vue编程式导航
1. 页面导航的两种方式 1.1. 声明式导航: 通过点击链接实现导航的方式, 叫做声明式导航.例如: 普通网页中的<a></a>链接或vue中的<router-link ...
页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则
页面导航的两种方式 vue-router编程式导航编程式导航基本用法 <!DOCTYPE html> <html lang="en"><head&g ...

Vue3.x动态路由、命名路由和编程式导航

1.动态路由的定义和使用

2.编程式导航

3.命名路由

Vue3.x动态路由、命名路由和编程式导航相关推荐

最新文章

热门文章