vue编程式导航，命名路由

//使用 window.location.href 的形式，叫做 编程式导航   绑定事件的形式
<template><div class="goods-item" v-for="item in goodslist" :key="item.id" @click="goDetail(item.id)"></div>
</template>

</script>
export default {goDetail(id) {// 使用JS的形式进行路由导航// 1. 最简单的// this.$router.push("/home/goodsinfo/" + id);// 2. 传递对象// this.$router.push({ path: "/home/goodsinfo/" + id });// 3. 传递命名的路由this.$router.push({ name: "goodsinfo", params: { id : id } });}}
};
</script>

var router = new VueRouter({routes: [ // 配置路由规则{ path: '/', redirect: '/home' },{ path: '/home', component: HomeContainer },{ path: '/home/goodsinfo/:id', component: GoodsInfo, name: 'goodsinfo' },{ path: '/home/goodsdesc/:id', component:GoodsDesc, name: 'goodsdesc'  },],linkActiveClass: 'mui-active' // 覆盖默认的路由高亮的类，默认的类叫做 router-link-active
})

//配置路由的规则的属性包含：path，redirect，component，children，name

注意： 一定要区分 this.$route 和 this.$router 这两个对象，this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它

id: this.$route.params.id, // 将路由参数对象中的 id 挂载到 data , 方便后期调用

this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址

goDesc(id) {  // 点击使用编程式导航跳转到 图文介绍页面  this.$router.push({ name: "goodsdesc", params: { id } });},

转载于:https://www.cnblogs.com/ll15888/p/11240041.html

vue编程式导航，命名路由相关推荐

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详尽：编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航... 通俗理解编程式导航 ...
vue编程式导航跳转到当前路由多次执行抛出NavigationDuplicated: Avoided redundant navigation to current location:
为什么? push方法会返回一个Promise对象,内部会进行跳转成功或失败的回调解决方法只需在push方法末尾传递两个成功和失败的回调函数,可以捕获到当前的错误,可以解决.但是此种方法治标不治本 ...
Vue-router 使用编程式导航多次执行会报错NavigationDuplicated的解决方法
路由跳转有以下两种方式: 1.声明式导航: router-link,需要to属性,可以实现路由的跳转 2.编程式导航: 利用的是组件的实例 $route.push|replace 方法,可以实现路由的 ...
Vue3.x动态路由、命名路由和编程式导航
1.动态路由的定义和使用两种方法 : 1.路由中的动态传参以 : 进行声明,冒号后面跟的是动态参数名(path: 'apple/:mid'),通过{{ $route.params.m ...
Vue -- 编程式路由导航
文章目录 1. 声明式导航 & 编程式导航 1.1 声明式导航 1.2 编程式导航 2. vue-router 中的编程式导航 API 2.1 常用的编程式导航 API 2.2 \$route ...
Vue页面与页面之间的传值（router.push()编程式导航）
页面与页面之间跳转传值,其实我们一般用两种,query传参或者用params 其实这两个方式都是页面导航的一种,编程式导航:通过调用JavaScript形式的API实现导航的方式,大家不了解的可以去官 ...
vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...
vue声明式导航和编程式导航
声明式导航: 声明式导航是写在template标签里,通过<router-link></router-link>标签来触发: <router-link to=" ...

vue编程式导航，命名路由

vue编程式导航，命名路由相关推荐

最新文章

热门文章