路由——重定向 别名 命名路由

• 重定向
• 别名
• 命名式路由

重定向

从当前页面跳转到别的页面——也可以说，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

通过 routes 配置 redirect 选项

<div id="app">
        <p>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <router-view></router-view>
</div>

<script>
    const foo = {
        template: `<div>
            <router-link to='/foo/fe'>foo-fe</router-link>
            <router-link to='/foo/be'>foo-be</router-link>
            <router-view></router-view>
            </div >
            `
    };
    var router = new VueRouter({
        routes: [
            {
                path: '/bar',
                component: {
                    template: '<div>bar page</div>'
                }
            }, {
                path: '/foo',
                //重定向到/foo/fe
                redirect: "/foo/fe",
                component: foo,
                children: [
                    {
                        //相对路径方式
                        path: 'fe',
                        component: {
                            template: '<div>foo-fe page</div>'
                        }
                    }
                    , {
                        //绝对路径方式
                        path: '/foo/be',
                        component: {
                            template: '<div>foo-be page</div>'
                        }
                    }
                ]
            }
        ]
    })
    var vm = new Vue({
        router,
        el: "#app"
    })
</script>

初始界面：


当点击go to foo 时，发生重定向 地址跳转到 /foo/fe 页面，下图可以看出。

别名

别名可以理解为：如果/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

别名和重定向的区别在于url ，重定向的url会改变，别名的url 会保持。

通过 routes 配置 alias 选项设置

<div id="app">
        <p>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <router-view></router-view>
</div>

<script>
//用别名 alias 试试
    const foo = {
    //使用时可直接用 alias
        template: `<div>
            <router-link to='/fooSonB'>foo-fe</router-link>
            <router-link to='/fooSonG'>foo-be</router-link>
            <router-view></router-view>
            </div >
            `
    };
    var router = new VueRouter({
        routes: [
            {
                path: '/bar',
                component: {
                    template: '<div>bar page</div>'
                }
            }, {
                path: '/foo',
                redirect: "/fooSonB",
                component: foo,
                children: [
                    {
                        //相对路径方式
                        path: 'fe',
                        // alias 设置
                        alias:'/fooSonB',
                        component: {
                            template: '<div>foo-fe page</div>'
                        }
                    }
                    , {
                        //绝对路径方式
                        path: '/foo/be',
                        alias:'/fooSonG',
                        component: {
                            template: '<div>foo-be page</div>'
                        }
                    }
                ]
            }
        ]
    })
    var vm = new Vue({
        router,
        el: "#app"
    })
</script>

运行结果:


可以看到地址栏的 url 中使用的时别名alias

命名路由

总觉得别名和命名路由作用有点相似，也有点混乱，所以这里对比一下。

命名路由的出现 是通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

通过 routes 配置 name 选项设置

<script>
    const foo = {
    //命名路由用法
        template: `<div>
            <router-link :to='{ name: "fooSonB"}'>foo-fe</router-link>
            <router-link :to='{ name: "fooSonG",params:{id:123}}'>foo-be</router-link>
            <router-view></router-view>
            </div >
            `
    };
    var router = new VueRouter({
        routes: [
            {
                path: '/bar',
                component: {
                    template: '<div>bar page</div>'
                }
            }, {
                path: '/foo',
                //使用命名路由
                redirect:{ name: "fooSonB"},
                component: foo,
                children: [
                    {
                        //相对路径方式
                        path: 'fe',
                        //命名路由
                        name:'fooSonB',
                        component: {
                            template: '<div>foo-fe page</div>'
                        }
                    }
                    , {
                        //绝对路径方式
                        path: '/foo/be/:id',
                        //命名路由 ---动态路由
                        name:'fooSonG',
                        component: {
                            template: '<div>foo-be 	page----{{$route.params.id}}</div>'
                        }
                    }
                ]
            }
        ]
    })
    var vm = new Vue({
        router,
        el: "#app",
    })
</script>

运行结果:





“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
命名路由通过一个名称来标识一个路由，多用在编程式导航中用。

参考文档：
命名路由
重定向和别名