Vue2.x 路由Router的定义（配置）、切换、异步加载、路由参数 API

VueRouter 配置路由

1. App.vue

<template>
  <transition name="fade">
    <router-view></router-view>
  </transition>
</template>

2. main.js 引入App组件作为根组件

import Vue from 'vue'
import App from '@/App'
import router from '@/router'                 // api: https://github.com/vuejs/vue-router

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

3. 定义路由

const app = new Vue({
    new VueRouter({
	    mode: 'history', // hash, history 两种模式
        routes: [
            {
                path: '/home',
                component: Home
            },
            {
                path: '/about',
                component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
            },
            {
                path: '/user',
                name: 'userIndex',
				// 下面这个属性也不少，因为，我们是先进入userIndex页面，才能进入子路由,模板中包含 <router-view/>
                component: userIndex,
                children: [
                    {
						// 子路由的路径前面是没有根路径（'/'）的
                        path: 'login',
                        name: 'login',
                        component: login
					},
                    {
                        path: 'registUser',
                        name: 'registUser',
                        component: registUser
					}
                ]
			},
        ] // routes: routes 的简写
    })
}).$mount('#app')

1. 使用 import 为异步加载组件
2. 匹配的组件会替换 <router-view> (作为一个占位符)

$router.push API 路由切换

第一种：$router.push(String) 路由切换

1. $router.push参数url字符串
2. 字符串就是目标路由地址

this.$router.push('/admin/blog/add');

第二种：$router.push(Object) 路由切换

$router.push参数JSON对象参数

1. 根据 path 路径切换

this.$router.push({
    path: '/admin/blog/add',
    query: {
        id: rowItem.id,
        tagObj: rowItem
    }
});

2. 根据定义的router的name切换

this.$router.push({
    name: 'user',
    params: {
        userId: 123
    }
});

属性说明：

1. path 是跳转的路由地址（可以作为路由切换的依据）
2. query / params 是传递到目标页面的参数对象
3. name 是定义的路由名字（可以作为路由切换的依据）

目标页面如何获取JSON对象中的参数？

在切换页面打印如下对象即可：

this.$route.query

restful传递参数

{
	path: "/user/:id",
	name: "user",
	component: user
}

<router-link> 组件切换路由

to属性值为字符串

<router-link to="/home/phone">手机</router-link>

to属性值为JSON对象

// 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>   

等价于

this.$router.push({
    name: 'user',
    params: {
        userId: 123
    }
});

获取restful的参数

this.$route.params.id