版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83821872
文章目录
路由的嵌套与重定向
为什么要使用路由的嵌套
随着路由页面的增多，我们经常会用到页面嵌套的情况。比如说新闻模块路径为/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>
结果
分析
从上面的信息中我们可以看出，当我们访问项目的根节点时，就是访问/路径时，其自动跳转到'/root/page1'页面，于是在页面中就显示出了page1中的信息页面1。
从路径'/root/page1'中我们也可以看到，其子页面page1中的路由地址其实是由其父节点绝对路径/root与子节点相对路径page1拼接而成的。
这里有一个需要注意的事项，那就是在Vue2.x中，如果当template模版中有多个DOM元素，那么这些DOM元素需要被一个父DOM元素包裹，否则的话Vue会报错。