1、命名路由

给一个路由命一个唯一的名称，然后跳转调用这个名称即可。
（1）在src/router/index.js中加一个带name的路由，代码如下：

{path: 'one', // 子页面1name: 'one', // 路由名称-命名路由component: One // 页面组件
}

（2）在src/component/Home.vue页面中调用，代码如下：

// template跳转调用
<router-link :to="{name: 'one'}">子页面1</router-link>// router.push函数跳转调用
router.push({ name: 'user'}})

2、命名视图

在同一个页面展示多个视图，如果不用嵌套，只能采用命名视图来实现了，代码如下：
（1）在src/router/index.js中，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
// 创建页面组件
const Header = { template: '<div>Header</div>' }
const Left = { template: '<div>Left</div>' }
const Right = { template: '<div>Right</div>' }Vue.use(Router)export default new Router({routes: [{path: '/', // 主页路由components: {default: Header,a: Left,b: Right}}]
})

（2）在src/App.vue中，代码如下：

<template><div id="app"><router-view /><router-view name="a" class="left" /><router-view name="b" class="right" /></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {text-align: center;color: #2c3e50;width: 500px;border: 1px solid red;margin: 0 auto;
}.left,.right{float: left;width:48%;text-align: center;border:1px solid red
}
</style>

PS：经过实践，命名视图只能放在最顶级的页面中，即第一步中的代码不能放在其他页面中。

3、重定向

重定向是通过route的配置中关键词redirect来实现的，具体代码如下：
（1）在src/router/index.js中，代码如下：

export default new Router({routes: [{path: '/', // 默认页面重定向到主页redirect: '/home' // 重定向},{path: '/home', // 主页路由component: Home,children:[ // 嵌套子路由{path:'/home/two/:id/:name', // 子页面2component:Two},{path:'/home/three/:id/:name', // 子页面3name: 'three', // 路由名称-命名路由redirect: '/home/two/:id/:name' // 重定向-传递参数},]}]
})

（2）在src/components/Home.vue中，代码如下：

<router-link to="/">首页</router-link> | 
<router-link to="/home/two/1/lisi">子页面2</router-link>  |
<router-link :to="{name: 'three', params: {id: 1, name: 'zhangsan'}}">子页面3</router-link>

说明1-不带参数的重定向：

redirect: ‘/home’ // 重定向-不带参数
说明2-带参数的重定向：

redirect: '/home/two/:id/:name' // 重定向-传递参数

4、别名

重定向是通过route的配置中关键词alias来实现的，具体代码如下：
（1）在src/router/index.js中，代码如下：

{path:'/one', // 子页面1component:One,alias: '/oneother'
}

（2）在src/components/Home.vue中，代码如下：

<router-link to="/oneother">子页面1</router-link>

说明1：redirect和alias的区别

redirect：直接改变了url的值，把url变成了真实的path路径。
alias：url路径没有别改变，这种更友好，让用户知道自己访问的路径，只是改变了中的内容。
说明2：
别名请不要用在path为’/’中，如下代码的别名是不起作用的。

{path: '/',component: Hello,alias:'/home'
}