Vue基础六——vue-router 利用url传递参数

我们之前已经学会传递参数，但是我们这些老程序员的情怀还是利用url来传递参数，因为我们以前在前后端没有分开开发的时候，经常这样做。在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐地排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。

1.3.1、:冒号的形式传递参数

我们可以在理由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。 -. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

{
  path: '/params/:newsId/:newsTitle',
  name: 'Params',
  component:Params
}

我们需要传递的参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。

在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 {
  data() {
    return {
      msg: "params pages"
    };
  }
};
</script>

在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了。
<router-link to="/params/aaa/bbb">Params</router-link>

我们已经实现了以url方式进行传值，这在实际开发中经常使用，必须完全了解。

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

上边的例子，我们传递了新闻编号，现在需求升级了，我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。

加入正则表达式需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。

path:'/params/:newsId(\\d+)/:newsTitle',

加入正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。

1.4、vue-router 的重定向-redirect

开发过程中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。

1.4.1、redirect基本重定向

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

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

Vue.use(Router)
export default new Router({
  routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/params/:newsId(\\d+)/:newsTitle',
      name: 'Params',
      component: Params
    },
    {
      path: '/goHome',
      redirect: '/'
    }
  ]
})

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

1.4.2、重定向时传递参数

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

{
  path:'/params/:newsId(\\d+)/:newsTitle',
  component:Params
},{
  path:'/goParams/:newsId(\\d+)/:newsTitle',
  redirect:'/params/:newsId(\\d+)/:newsTitle'
}

已经有了一个params路由配置，我们在设置一个goParams的路由重定向，并传递了参数。这时候我们的路由参数就可以传递给params.vue组件了。参数接收方法和正常的路由接收方法一样。
1.5、alias别名的使用

上节学习了路由的重定向，我相信大家已经可以熟练使用redirect进行重定向了。使用alias别名的形式，我们也可以实现类似重定向的效果。

首先我们在路由配置文件里（/src/router/index.js），给上节课的Home路径起一个别名，aliasHi1。

{
  path: '/hi1',
  name: 'hi1',
  component: Hi1,
  alias:'/aliasHi1'
}

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

<router-link to="/aliasHi1">aliasHi1</router-link>