vue之页面跳转和获取路径参数值_vue路径参数_Charles_Tian的博客

相关文章推荐

温柔的打火机 · 河南省政府采购网· 4 月前 ·

坏坏的红茶 · 关于2024年五一劳动节放假安排及节后作息时 ...· 4 月前 ·

紧张的烤面包 · 攀枝花市交通运输局局长曾科谈“发展共享交通 ...· 4 月前 ·

听话的跑步鞋 · 合纵六国的苏秦，为何要求将自己车裂？|齐国| ...· 8 月前 ·

玩篮球的跑步机 · 云纹铜禁 - 文化遗产 - 文旅大观 - ...· 1 年前 ·

一、获取路径参数

vue获取路径参数值的方式与原生js开发的网站、小程序获取参数值有点不一样，但总归来说，实质都是一样的。

底层的原理实现都是由原生js而来，小程序和vue开发的网站，它们获取参数值的方式其实都是在原生js做了一个封装，只不过封装之后的调用的语法要与它们自己系统结构一致。

下面分别介绍原生js实现获取路径参数值、小程序获取路径参数值和vue获取路径参数值：

1.原生js实现

可参考链接： https://blog.csdn.net/Charles_Tian/article/details/78704908

2.小程序实现

可参考链接： https://blog.csdn.net/Charles_Tian/article/details/80341986

3.vue.js实现

www.google.com/index/web?user_id=666&nickName=itachi

然后在下一页面初始化的时候调用以下两句便可获取相对应的路径参数名的值：

this.$route.query.user_id

this.$route.query.nickName

created() { // 获取链接参数user_id和nickName值，然后存进内存中 this.user_id = this.$route.query.user_id; this.nickName = this.$route.query.nickName; console.log(this.user_id)//666 console.log(this.nickName)//itachi

console.log(this.$route.query.user_id)//666

console.log(this.$route.query.nickName)//itachi

下面我来解释下，虽然具体底层原理到底怎么实现的不知道，但是应该跟原生js差别不会太大。

this指的是当前执行对象，在vue中不管是调用数据还是对象，都要用this，这里需要一提的是vue和小程序类似，this指的当前引用的对象，而往往从后台获取到的数据是一个闭包，有自己的作用域，this指代的不再是当前执行对象，所以有的时候会报错就是这个原因。建议使用var that = this;将this赋给that可免去没必要的bug，或者var _this = this都可以；

然后就是$route，懂一点vue的人都知道这个是路由，与标签a的作用类似；

再就是query，顾名思义，这个是获取的是路径链接；

最后是参数名，接下来就没必要多解释了。

二、路由跳转的方式

1.声明式页内跳转

<router-link to='/a'>页面a</router-link>
<!--携带参数的形式-->
<router-link to='/a?userid=666&username=itachi'>页面a</router-link>

2.声明式页外跳转（新开页面）方式

<router-link to='/a' target='_blank'>页面a</router-link>
<!--带参数形式-->
<router-link to='/a?userid=666&username=itachi' target='_blank'>页面a</router-link>

注：router-link在页面渲染的时候是按照a标签的标准来的，即将router-link渲染成a标签

3.编程式页内跳转

this.$router.push({ path: '/a' });
//带参数形式1
this.$router.push({ path: '/a', query: {'userid': 666, 'username': 'itachi'}});
//带参数形式2
this.$router.push({ path: '/a?userid=666&username=itachi'});

4.编程式页外跳转（新开页面）方式

window.open('#/a', '_blank');
//带参数方式
window.open('#/a?userid=' + userid + '&username' + username, '_blank');//这里一定要注意路径

5.插件（iview插件，具体使用可参考： https://blog.csdn.net/Charles_Tian/article/details/81980409 ）式跳转方式

    {
          title:'操作',
          key:"operate",
          align: 'center',
          render: (h, params) => {
              return h('div', [
                  h('a', {
                      props: {
                          type: 'text',
                          size: 'small'
                      style: {
                          marginRight: '5px',
                          color:'#3a9987'
                      attrs:{
                        href:'#/a?userid=' + userid + '&username=itachi',
                        target:"_blank"
                  }, '用户列表'),
                  h('a', {
                      props: {
                          type: 'text',
                          size: 'small'
                      style: {
                          marginRight: '5px',
                          color:'#3a9987'
                      attrs:{
                        href:'#/b',
                        target:"_self"
                  }, '用户昵称')
                    一、获取路径参数vue获取路径参数值的方式与原生js开发的网站、小程序获取参数值有点不一样，但总归来说，实质都是一样的。底层的原理实现都是由原生js而来，小程序和vue开发的网站，它们获取参数值的方式其实都是在原生js做了一个封装，只不过封装之后的调用的语法要与它们自己系统结构一致。下面分别介绍原生js实现获取路径参数值、小程序获取路径参数值和vue获取路径参数值：1.原生js实现...
Vue.prototype.$url=function(){
 var url = decodeURIComponent(location.search); //获取url中?符后的字串
 var theRequest = new Object();
 if (url.indexOf(?) != -1) {
  var str = url.substr(1);
  strs = str.split(&);
  for(var i = 0; i < strs.length; i ++) {
   theRequest[strs[i].sp
				浏览器地址：http://localhost:8080/#/loginmis?ticket=1234
1.  window.location.href
获取完整路径：http://localhost:8080/#/loginmis?ticket=1234
2.  this.$ route.path
获取路由路径："/loginmis"
3.  this.$ route.params
路由路径参数: {}
4. this.$route.query
路由查询参数: { ticket: ‘1234’ }
				VUE路由跳转可以通过name跳转页可以通过path跳转，带参数的话参数可以封装在params中也可以封装在query中。
1）params传参数：类似post，html 取参 $route.params.id，script 取参 this.$route.params.id，刷新页面参数消失；
2）query传参数： 类似get,url后面会显示参数，html 取参 $route.query.id，script 取参 this.$route.query.id，刷新页面参数还在。
一、router-li
				看过Vue-Router源码的小伙伴都值，Vue-Router解析路径参数时是借助path-to-regexp库将参数解析成对应的正则表达式的。接下来我们将基于6.2.0版本的path-to-regexp库介绍下该库的基本使用和背后的实现原理。更有意思的path-to-regexp库虽小，但是背后实现了一个非图灵完备的词法分析，好sao啊，我好喜欢…
废话不多说，直接上车!!!
下面我们看下path-to-regexp的基本使用，它的主要作用是将字符串路径（例如/user/:name）转换成对应的正则表达式
				例子: 有一个路径:http://school/#/business/syllabus/50779
this.$route.params.id 可以获取路由最后参数 50779
this.$route.params.path 可以获取到根路径下的整个路径 business/syllabus/50779
this.$route还有一些其他的参数,具体可以自己动手 console.log(thi...