一、配置组件

1、配置子组件：

var Login = {
  template: '#login'
}
var Register = {
  template: '#register'
}
var User = {
  template: '#user'
}

<template id="login">
  <div>
    <p>我是login组件</p>
  </div>
</template>
<template id="register">
  <div>register组件</div>
</template>
<template id="user">
  <div>user</div>
</template>

2、在父组件中使用router-link与router-view组件

<div id="app">
  <router-link :to="{name:'Login',query:{uid:'001',uname:'小王',pwd:'12344'}}">登录</router-link>
  <router-link to="/register">注册</router-link>
  <router-link to="/user">用户中心</router-link>
  <router-view></router-view>
</div>

3、使用路由

Vue.use(VueRouter);

4、创建路由对象

const router = new VueRouter({
  // 配置路由
  routes: [{
    path: '/login',
    name: 'Login',
    component: Login
  }, {
    path: '/register',
    name: 'Register',
    component: Register
  }, {
    path: '/user',
    name: 'User',
    component: User
  }]
})

5、在父组件的数据层添加 router

6、在样式表里添加样式，.router-link-exact-active是规定好的样式，作用是能改变当前点击的组件的颜色，以增强视觉感

.router-link-exact-active{ color:skyblue; }

二、配置login组件的传参与取参

1、在视图层设置—配置（传参）：

<router-link :to="{name:'Login',query:{uid:'001',uname:'小王',pwd:'12344'}}">登录</router-link>

这时点击登录会开始传参，地址栏变成：

2、在组件中设置—获取（取参）：

login的子组件中：数据中心定义uid，uname以及pwd；然后将父组件传的参数赋值给对应变量。

var Login = {
  template: '#login',
  data() {
    return {
      uid: '',
      uname: '',
      pwd: ''
    }
  },
  created: function () {
    // $route 路由信息对象,只读对象 
    console.log(this.$route);
    this.uid = this.$route.query.uid;
    this.uname = this.$route.query.uname;
    this.pwd = this.$route.query.pwd
  }
}

login子组件视图层，将数据中心的数据取出显示在页面

<template id="login">
  <div>
    <p>我是login组件</p>
    <p> 登录页<br> <b v-if="uid!=''">{{uid}}----{{uname}}----{{pwd}}</b> </p>
  </div>
</template>

代码演示：

三、配置register组件的传参与取参

1、在视图层设置—配置（传参）：

<router-link to="/register/111">注册</router-link>

可以看到这个参数是在路径之后的，所以在数据层我们需要将register的路径加以修改

2、修改配置路由：

const router = new VueRouter({
  // 配置路由 
  routes: [{
    path: '/login',
    name: 'Login',
    component: Login
  }, {
    path: '/register/:id',
    name: 'Register',
    component: Register
  }, {
    path: '/user',
    name: 'User',
    component: User
  }]
})

将register的路径后面加上/:id，以保证传参准确

3、在子组件的数据层中的数据中心定义一个变量用来接收数据

var Register = {
  template: '#register',
  data: function () {
    return {
      rid: ''
    }
  },
  created() {
    console.log(this.$route);
    this.rid = this.$route.params.id;
  }
}

4、接收参数

<template id="user">
  <div>子组件user</div>
  <p>我接收到的参数是----{{info}}</p>
</template> 

代码演示：