asp c 网站开发,国外网站风格,网页制作网站建设实战大全,济南网站制作哪家最好前言#xff1a;顾名思义#xff0c;vue路由传参是指嵌套路由时父路由向子路由传递参数#xff0c;否则操作无效。传参方式可以划分为params传参和query传参#xff0c;params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。
参考官网#x…前言顾名思义vue路由传参是指嵌套路由时父路由向子路由传递参数否则操作无效。传参方式可以划分为params传参和query传参params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。
参考官网https://router.vuejs.org/zh/guide/essentials/navigation.html
params传参url中显示参数
文件结构定义路由在定义path路由路径时定义参数名和格式如 path: /one/login/:num routerindex.js文件如下
/* eslint-disable*///第一步引用vue和vue-router Vue.useVueRouter
import Vue from vue
import Router from vue-router
Vue.use(Router)//第二步引用定义好的路由组件
import ChildOne from ../components/childOne
import ChildTwo from ../components/childTwo
import Log from ../components/log.vue
import Reg from ../components/reg.vue//第三步定义路由路由对象包含路由名、路径、组件、参数、子路由等每一个路由映射到一个组件
//第四步通过new Router来创建router实例
export default new Router({mode: history,routes: [{path: /one,name: ChildOne,component: ChildOne,children:[{path:/one/log/:num,component:Log,},{path:/one/reg/:num,component:Reg,},],},{path: /two,name: ChildTwo,component: ChildTwo}]
})
在父路由组件上使用router-link进行路由导航传参用router-link to/one/login/001的形式向子路由组件传递参数。使用router-view进行子路由页面内容渲染父路由组件childOne.vue 如下
templatediv styleborder:1px solid red;color:red;p这是父路由childOne对应的组件页面/pp下面可以点击显示嵌套的子路由 /prouter-link to/one/log/123显示登录页面/router-linkrouter-link to/one/reg/002显示注册页面/router-linkrouter-view/router-view/div
/template
子路由通过 this.$route.params.num 的形式来获取父路由向子路由传递过来的参数子路由组件login.vue如下
templatediv styleborder:1px solid orange;color:orange;p登录界面这是另一个嵌套路由的内容/ph3{{this.$route.params.num}}/h3/div
/template
效果 注意如上所述路由定义的path: /one/login/:num路径和to/one/login/001必须书写正确否则不断点击切换路由会因为不断将传递的值显示添加到url中导致路由出错如下 传递的值存在url中存在安全风险为防止用户修改另一种方式不在url中显示传递的值 params传参url中不显示参数
定义路由时添加name属性给映射的路径取一个别名routerindex.js文件修改router如下
export default new Router({mode: history,routes: [{path: /one,name: ChildOne,component: ChildOne,children:[{path:/one/log/,name:Log,component:Log,},{path:/one/reg/,name:Reg,component:Reg,},],},{path: /two,name: ChildTwo,component: ChildTwo}]
})
在父路由组件上使用router-link进行路由导航使用 router-link :to{name:home,params:{id:001}} 形式传递参数。注意 : to 前面的冒号childOne.vue组件修改如下
templatediv styleborder:1px solid red;color:red;p这是父路由childOne对应的组件页面/pp下面可以点击显示嵌套的子路由 /prouter-link :to{name:Log,params:{num:666}}显示登录页面/router-linkrouter-link :to{name:Reg,params:{num:888}}显示注册页面/router-linkrouter-view/router-view/div
/template
子路由组件页面获取父路由传参方式不变reg.vue 文件如下
templatediv styleborder:1px solid orange;color:orange;p登录界面这是另一个嵌套路由的内容/ph3子路由获取的参数{{this.$route.params.num}}/h3/div
/template 注意上述这种利用params不显示url传参的方式会导致在刷新页面的时候传递的值会丢失 使用Query实现路由传参
定义路由 routerindex.js文件如下
export default new Router({mode: history,routes: [{path: /one,name: ChildOne,component: ChildOne,children:[{path:/one/log/,component:Log,},{path:/one/reg/,component:Reg,},],},{path: /two,name: ChildTwo,component: ChildTwo}]
})
修改路由导航 router-link :to{path:/one/log,query:{num:123}} childOne.vue 文件修改如下
templatediv styleborder:1px solid red;color:red;p这是父路由childOne对应的组件页面/pp下面可以点击显示嵌套的子路由 /prouter-link :to{path:/one/log,query:{num:123}}显示登录页面/router-linkrouter-link :to{path:/one/reg,query:{num:999}}显示注册页面/router-linkrouter-view/router-view/div
/template
子路由组件通过 this.$route.query.num 来显示传递过来的参数reg.vue 文件如下
templatediv styleborder:1px solid purple;color:purple;p注册界面这是二级路由页面/ph3{{this.$route.query.num}}/h3/div
/template效果如下 PS: 在第一步的定义路由中我们都使用了modehistory 作用就是去除路由跳转时路由路径前的 “#”
常用的mode模式有两种
默认为hash模式最明显的标志是URL上有#号 localhost:8080/#/路由会监听#后面的信息变化进行路由匹配
另一种为history模式不会有#出现很大程度上对URL进行了美化。需要**注意**history模式在打包后的路由跳转需要服务器配合
默认不使用modehistory 如下