Vue中路由的嵌套与重定向

太过爱你忘了你带给我的痛 2022-04-18 02:37 409阅读 0赞

### 文章目录 ###

*  路由的嵌套与重定向
 *   *  为什么要使用路由的嵌套
     *  为什么要使用路由的重定向
     *  用法
 *  示例
 *   *  源码
     *  结果
     *  分析

# 路由的嵌套与重定向 #

## 为什么要使用路由的嵌套 ##

随着路由页面的增多，我们经常会用到页面嵌套的情况。比如说新闻模块路径为`/news`，新闻列表为`/news/newslist`，新闻详情为`/news/newslist/newsinfo`，新闻详情的评论为`/news/newslist/newsinfo/newscomment`等等等等，诸如此类的情况在现在的网站中其实是很常见的，所以说在一个正常的网站中，这是一种很常见的现象。

## 为什么要使用路由的重定向 ##

路由的重定向主要有两方面的用处：

*  其一是将用户导向网站的首页，方便用户对该网站有个整体的初步印象。
 *  其二是权限拦截，将未登陆的用户导向登陆、注册页面。

## 用法 ##

路由的嵌套就是在以往的路由对象中加上`children`关键字，`children`后面跟数组，其数组中存放每个子路由节点的相对路径等信息。而子节点的路由地址是由路由的父节点地址拼接上子节点的相对地址组合而成。

路由的重定向是采用`redirect`关键字，该关键字后面跟路径字符串，由此来控制页面在进入一个页面后，直接自动跳转到`redirect`所指定的页面中。

# 示例 #

## 源码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue-router</title>
    </head>
    <body>
    <template id="root">
        <div>
            <router-view></router-view>
        </div>
    </template>
    <template id="page1">
        <div>
            <h2>页面1</h2>
        </div>
    </template>
    <template id="page2">
        <div>
            <h2>页面2</h2>
        </div>
    </template>
    <div id="app">
        <router-link to="/root/page1">页面1</router-link> |
        <router-link to="/root/page2">页面2</router-link>
        
        <router-view></router-view>
    </div>
    </body>
    <script src="../../../js/vue/vue/2.0/vue.js"></script>
    <script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script>
    <script type="application/javascript">
        //定义路由根组件
        var App = Vue.extend({});
        //根界面
        var root = Vue.extend({
            template:'#root'
        });
        //定义page1页面
        var page1 = Vue.extend({
            template:'#page1'
        });
        //定义page2页面
        var page2 = Vue.extend({
            template:'#page2'
        });
        //设定路由规则
        var router = new VueRouter({
            routes:[
                {
                    path:'/'
                    ,redirect:'/root/page1'
                }
                ,{
                    path:'/root'
                    ,component:root
                    ,children:[
                        {
                            path:'page1'
                            ,component:page1
                        }
                        ,{
                            path:'page2'
                            ,component:page2
                        }
                    ]
                }
            ]
        });
        //开启路由
        new Vue({
            el:'#app'
            ,router:router
        });
    </script>
    </html>

## 结果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70]

## 分析 ##

从上面的信息中我们可以看出，当我们访问项目的根节点时，就是访问`/`路径时，其自动跳转到`'/root/page1'`页面，于是在页面中就显示出了`page1`中的信息`页面1`。

从路径`'/root/page1'`中我们也可以看到，其子页面`page1`中的路由地址其实是由其父节点绝对路径`/root`与子节点相对路径`page1`拼接而成的。

这里有一个需要注意的事项，那就是在`Vue2.x`中，如果当`template`模版中有多个`DOM`元素，那么这些`DOM`元素需要被一个父`DOM`元素包裹，否则的话`Vue`会报错。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70]: /images/20220418/9e3d72ea2eeb4712a533c30f0b9c3bf7.png