vue实践03之vue_router传参-CSDN博客

vue实践03之vue_router传参

通过标签中的to传参

<router-link>标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
复制代码

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。
了解基本的语法后，我们改造一下我们的src/App.vue里的标签,我们把hi1页面的进行修改。

<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>
复制代码

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1

 routes: [             
    {                    
      path: '/',        
      name: 'Hello',     
      component: Hello   
    },{
      path:'/hi',
      component:Hi,
      children:[
        {path:'/',component:Hi,name:'hi'},
        {path:'hi1',component:Hi1,name:'hi1'},
        {path:'hi2',component:Hi2,name:'hi2'}
      ]
    }
  ]
复制代码

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收. {{$route.params.username}}

单页面多路由区域操作

实际需求是这样的，在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。例如我们在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立了新的项目，并打开了src目录下的App.vue文件，在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。

 <router-view ></router-view>
 <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
 <router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>
复制代码

现在的页面中有了三个标签，也就是说我们需要在路由里配置这三个区域，配置主要是在components字段里进行。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

Vue.use(Router)

export default new Router({
 routes: [
   {
     path: '/',
     components: {
       default:Hello,
       left:Hi1,
       right:Hi2
     }
   },{
     path: '/Hi',
     components: {
       default:Hello,
       left:Hi2,
       right:Hi1
     }
   }

 ]
})
复制代码

上边的代码我们编写了两个路径，一个是默认的‘/’，另一个是'/Hi'.在两个路径下的components里面，我们对三个区域都定义了显示内容。

定义好后，我们需要在component文件夹下，新建Hi3.vue和Hi4.vue页面就可以了。 Hi3文件如下：

<template>
    <div>
        <h2>{{ msg }}</h2> 
    </div>
</template>
 
<script>
export default {
  name: 'hi1',
  data () {
    return {
      msg: 'I am Hi1 page.'
    }
  }
}
</script>
复制代码

Hi4文件如下：

<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
 
<script>
export default {
  name: 'hi2',
  data () {
    return {
      msg: 'I am Hi2 page.'
    }
  }
}
</script>
复制代码

vue-router利用url传递参数

:冒号的形式传递参数

在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

{
    path:'/params/:newsId/:newsTitle',
     component:Params
}
复制代码

我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。 2. 在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>新闻ID：{{ $route.params.newsId}}</p>
        <p>新闻标题：{{ $route.params.newsTitle}}</p>
    </div>
</template>
 
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>
复制代码

在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了。 <router-link to="/params/198/jspang website is very good">params</router-link> |

正则表达式在URL传值中的应用

上边的例子，我们传递了新闻编号，现在需求升级了，我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。
path:'/params/:newsId(\\d+)/:newsTitle', 加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。

vue redirect重定向

我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。

{
      path:'/goback',
      redirect:'/'
    }
复制代码

这里我们设置了goback路由，但是它并没有配置任何component（组件），而是直接redirect到path:'/'下了，这就是一个简单的重新定向。

重定向时传递参数
我们已经学会了通过url来传递参数，那我们重定向时如果也需要传递参数怎么办？其实vue也已经为我们设置好了，我们只需要在ridirect后边的参数里复制重定向路径的path参数就可以了。可能你看的有点晕，我们来看一段代码：

{
            //path: '/params/:newsId/:newsTitle',
            path: '/params/:newsId(\\d+)/:newsTitle',
            component: Params
        }, {
            path: '/goback',
            redirect: '/'
        }, {
            path: '/goParams/:newsId(\\d+)/:newsTitle',
            redirect: '/params/:newsId(\\d+)/:newsTitle'
        }
复制代码

通过上述代码，实现了redirect的参数传递功能。

alias别名的使用

使用alias别名的形式，我们也可以实现类似重定向的效果。

首先我们在路由配置文件里（/src/router/index.js），给hi路径起一个别名，jspang

{
            path: '/hi',
            component: Hi,
            alias: '/alias',
            children: [
                { path: '/', component: Hi, name: 'hi' },
                { path: 'hi1', component: Hi1, name: 'hi1' },
                { path: 'hi2', component: Hi2, name: 'hi2' }
            ]
        }
复制代码

配置我们的，起过别名之后，可以直接使用标签里的to属性，进行重新定向。 <router-link to="/alias">alias</router-link>

路由的过度动画

css过渡类名：

组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name="fade",会有如下四个CSS类名：

fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。

那我们就在App.vue页面里加入四种CSS样式效果，并利用CSS3的transition属性控制动画的具体效果。代码如下：

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}
复制代码

mode的设置和404页面的处理

404页面的设置：
用户会经常输错页面，当用户输错页面时，我们希望给他一个友好的提示，为此美工都会设计一个漂亮的页面，这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制.

设置我们的路由配置文件（/src/router/index.js）：

{
   path:'*',
   component:Error
}
复制代码

这里的path:'*'就是找不到页面时的配置，component是我们新建的一个Error.vue的文件。

新建404页面：在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容

<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>
复制代码

路由中的钩子

我们知道一个组件从进入到销毁有很多的钩子函数，同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中，也可以写在我们的组件模板中。

路由配置文件中的钩子函数

我们可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。先来看一段具体的代码：

{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params,
      beforeEnter:(to,from,next)=>{
        console.log('我进入了params模板');
        console.log(to);
        console.log(from);
        next();
},
复制代码

我们在params路由里配置了bdforeEnter得钩子函数，函数我们采用了ES6的箭头函数，需要传递三个参数。我们并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。
三个参数：

to:路由将要跳转的路径信息，信息是包含在对像里边的。
from:路径跳转前的路径信息，也是一个对象的形式。
next:路由的控制参数，常用的有next(true)和next(false)。

写在模板中的钩子函数

在配置文件中的钩子函数，只有一个钩子-beforeEnter，如果我们写在模板中就可以有两个钩子函数可以使用：

beforeRouteEnter：在路由进入前的钩子函数。
beforeRouteLeave：在路由离开前的钩子函数。

export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  }
}
</script>
复制代码

这是我们写在params.vue模板里的路由钩子函数。它可以监控到路由的进入和路由的离开，也可以轻易的读出to和from的值。

编程式导航

前面的导航都是用标签或者直接操作地址栏的形式完成的，那如果在业务逻辑代码中需要跳转页面我们如何操作？这就是我们要说的编程式导航，顾名思义，就是在业务逻辑代码中实现导航。

this.router.go(1)

这两个编程式导航的意思是后退和前进，功能跟我们浏览器上的后退和前进按钮一样，这在业务逻辑中经常用到。比如条件不满足时，我们需要后退。 router.go(-1)代表着后退，我们可以让我们的导航进行后退，并且我们的地址栏也是有所变化的。

我们先在app.vue文件里加入一个按钮，按钮并绑定一个goback( )方法。

<button @click="goback">后退</button>
复制代码

App.vue script代码如下：

<script>
export default {
  name: "App",
   methods:{
    goback(){
      this.$router.go(-1);
    }
  }
};
</script>
复制代码

this.$router.push('/xxx ')

这个编程式导航都作用就是跳转，比如我们判断用户名和密码正确时，需要跳转到用户中心页面或者首页，都用到这个编程的方法来操作路由。

我们设置一个按钮，点击按钮后回到站点首页。

先编写一个按钮，在按钮上绑定goHome( )方法。

<button @click="goHome">回到首页</button>
复制代码

App.vue增加js代码

<script>
export default {
  name: "App",
   methods:{
    goback(){
      this.$router.go(-1);
    },
    goHome(){
      this.$router.push('/');
    }
  }
};
</script>
复制代码