vue-router命名路由-命名视图-重定向-别名

1、命名路由

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

{ path: 'one', // 子页面1 name: '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', // 子页面2 component:Two }, { path:'/home/three/:id/:name', // 子页面3 name: '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', // 子页面1 component: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' }