Vue基础六——单页面多路由区域操作

实际需求是这样的，在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。

例如我们在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立了新的项目，并打开了src目录下的App.vue文件，在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。

<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 HelloWorld from '@/components/HelloWorld'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components: {
        default:HelloWorld,
        left:Hi1,
        right:Hi2
      }
    },
    {
      path: '/Hi',
      name: 'HelloWorld',
      components: {
        default:HelloWorld,
        left:Hi2,
        right:Hi1
      }
    }
  ]
})

上边的代码我们编写了两个路径，一个是默认的‘/’，另一个是’/Hi’.在两个路径下的components里面，我们对三个区域都定义了显示内容。 定义好后，我们需要在component文件夹下，新建Hi1.vue和Hi2.vue页面就可以了。

Hi1.vue

<template>
  <h2>{{msg}}</h2>
</template>

<script>
export default {
  data() {
    return {
      msg: "I am Hi1"
    };
  }
};
</script>

Hi2.vue

<template>
  <h2>{{msg}}</h2>
</template>

<script>
export default {
  data() {
    return {
      msg: "I am Hi2"
    };
  }
};
</script>

最后在App.vue中配置我们的就可以了

<router-link to="/">首页</router-link> | 
<router-link to="/hi">Hi页面</router-link> |

vue-router 利用url传递参数

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

冒号的形式传递参数

我们可以在理由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。 在配置文件里以冒号的形式设置参数。我们在/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方式进行传值，这在实际开发中经常使用，必须完全了解。

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

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

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

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

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