1、router-view可以理解为一个占位符，用来给 当前url映射的组件 占位的，当前url映射的组件 会替换掉

2、router-link是一个全局组件，可以在任何一个vue组件中使用

3、动态路由：路由中的path是动态的，根据传参来显示对应的页面

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/', //等价于 path: ''
    redirect: '/home' 
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home.vue')
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/about.vue')
  },
  {
    path: '/user/:userName/:useAge',
    name: 'user',
    component: () => import('../views/user.vue')
  }
]

const router = new VueRouter({
  mode: 'history', //指定为history模式
  base: process.env.BASE_URL,
  routes,
  linkActiveClass: 'active' //给当前处于活跃状态的 router-link 添加一个 class:'active'
})

export default router

<template>
  <div id="app">
    <!-- router-link默认渲染为a标签，tag可以指定渲染为某个标签 -->
    <router-link to="/home" tag="button" >首页</router-link>&nbsp;  
    <!-- replace无法通过 浏览器的返回按钮 返回上一页 -->
    <router-link to="/about" replace>关于</router-link>&nbsp;  
    <router-link :to="'/user/'+name">用户</router-link>&nbsp;  

    <router-view/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'Tom'
    }
  }
}
</script>

<style lang="less">
#app {
  font-size: 12px;
  // 给当前处于活跃状态的 router-link 的文字设置为红色
  .active {
    color: red;
  }
}
</style>

// user.vue
<template>
  <div class="user">
      user
      <div>当前用户为：{{$route.params.userName}}</div>
  </div>
</template>

注意：
this.$router指的是constrouter=newVueRouter()中的router，代表整个router；this.$route 指的是 当前处于 活跃状态的路由对象，例如：

 {
    path: '/user/:userName/:useAge',
    name: 'user',
    component: () => import('../views/user.vue')
  }

4、路由嵌套

 . . . 

 {
    path: '/home',
    name: 'home',
    component: () => import('../views/home.vue'),
    children: [
      {
        path: '/', //等价于 path: ''
        redirect: 'homeNews' 
      },
      {
        path: 'homeNews',
        name: 'homeNews',
        component: () => import('../views/homeNews.vue'),
      },
      {
        path: 'homeMessage',
        name: 'homeMessage',
        component: () => import('../views/homeMessage.vue'),
      }
    ]
  },
  
  . . . 

// home.vue

<template>
  <div class="home">
      <div>home</div>
      <router-link to="/home/homeNews">新闻</router-link>&nbsp;
      <router-link to="/home/homeMessage">消息</router-link>

      <router-view/>
  </div>
</template>

结果：

5、路由传参

params：

 {
    path: '/user/:userName/:useAge',
    name: 'user',
    component: () => import('../views/user.vue')
  }
  
  跳转路由并携带params参数，to的字符串写法：
  <router-link :to="`/user/${myName}/${myAge}`">用户</router-link>
  
  data() {
		return {
			myName: 'tm',
			myAge: '18'
		}
	}
	
  this.$router.push(`/user/${this.myName}/${this.myAge}`)

 {
    path: '/user',
    name: 'user',
    component: () => import('../views/user.vue')
  }
  
  跳转路由并携带params参数，to的对象写法(只能用name，不能用path)：
  <router-link :to="{
  	name: 'user',
  	params: {
  		userName: myName,
  		useAge: myAge
  	}
  }">用户</router-link>
  
  data() {
		return {
			myName: 'tm',
			myAge: '18'
		}
	}
	
  this.$router.push({
  	name: 'user',
  	params: {
  		userName: this.myName,
  		useAge: this.myAge
  	}
  })

获取数据：

this.$route.params.userName
this.$route.params.userAge

query：

跳转路由并携带query参数，to的对象写法（path，name都能用）：
<router-link :to="{path: '/profile', query: {name: myName ,age: myAge}}">档案</router-link>

跳转路由并携带query参数，to的字符串写法：
<router-link :to="`/profile?name=${myName}&age=${myAge}`">档案</router-link>

data() {
	return {
		myName: 'tm',
		myAge: '18'
	}
}

this.$router.push({path: '/profile',query: {name: this.myName, age: this.myAge}})

获取数据：

this.$route.query.name

query结合props
1、对象写法

//about.vue
 profileClick() {
   this.$router.push({name: 'profile',query: {name: 'tm',age: 18}})
 }

  {
    path: '/profile',
    name: 'profile',
    meta: {title: '档案'},
    props($route) {
      return {bb: $route.query.name, cc: $route.query.age}
    },
    component: () => import('../views/profile.vue')
  },

//profile.vue
<h5>{{bb}}-{{cc}}</h5>

props: ['bb', 'cc'],

2、字符串写法

this.$router.push(`/profile?name=tm&age=18`)

params结合props
1、字符串写法

//about.vue
 profileClick() {
   this.$router.push(`/profile/tm/18`)
 }

{
    path: '/profile/:name/:age',
    name: 'profile',
    meta: {title: '档案'},
    props($route) {
      return {bb: $route.params.name, cc: $route.params.age}
    },
    component: () => import('../views/profile.vue')
  },

//profile.vue
 <h5>{{bb}}-{{cc}}</h5>
 
 props: ['bb', 'cc'],

1、对象写法

 profileClick() {
   this.$router.push({name: 'profile',params: {name: 'tm',age: 18}})
 }

  {
    path: '/profile',
    name: 'profile',
    meta: {title: '档案'},
    props($route) {
      return {bb: $route.params.name, cc: $route.params.age}
    },
    component: () => import('../views/profile.vue')
  },

  <h5>{{bb}}-{{cc}}</h5>
  
  props: ['bb', 'cc'],