命名路由
给路由命名就是在routers配置路由的时候加一个name属性，特别是在嵌套路由path名称特别长的时候，通过name名称来标识一个路由更加方便一些。
以下四种方式都可以导航到/page/home路径：
template模板里
或者说当用户点击了某个按钮，直接要跳到home.vue，那么可以在methods里代码调用:
嵌套路由
嵌套路由就是路由里面嵌套他的子路由，子路由关键属性children每一个子路由里面可以嵌套多个组件，子组件又有路由导航和路由容器
举例：假设page页面下包含home子组件和goods子组件
配置嵌套路由（在page路由下增加一个children属性，配置home和goods两个子组件路由）
page组件配置
效果如下:
你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。
命名视图
简单来说就是，给不同的router-view定义不同的名字，通过名字进行对应组件的渲染。如果router-view没有设置名字，那么默认名字为default。
适用场景
有时候我们想在一个界面里同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 topNav(顶部导航)、sidebar (侧导航) 和 main (主要内容) 三个视图，这个时候命名视图就派上用场了。
配置路由：根路由下定义了三个组件
index(主内容)：映射在router-view 默认视图上。
topNav(顶部导航)：映射在 router-view 的 name 为 top 的视图上。
sideNav(侧边栏)：映射在 router-view 的 name 为 side 的视图上。
App.vue文件（添加name属性创建两个命名视图和一个default默认视图）
效果如下:
重定向与别名
重定向
/a的重定向是/b，当用户访问 /a 时，URL 将会被替换成 /b，然后导航到 /b 页面
重定向的目标也可以是一个命名的路由：
甚至是一个方法，动态返回重定向目标：
重定向的适用场景
比如有这个场景，用户在浏览器地址栏输入
https://www.baidu.com/search/时找不到页面，如下图:
因为我们项目代码里都没有这个页面，那这个时候就可以用重定向让它跳到404页面,那么我们就能在路由里这样配置：
别名
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。/a 的别名是 /b，意味着当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
上面对应的路由配置为：
路由的两种模式
hash模式
路由默认的是使用 hash 模式,要想将hash模式变为history模式，我们只需要在配置路由时加上mode:'history’即可。
hash模式URL例子：http://www.abc.com/#/hello
hash即地址栏 URL 中的 # 符号，比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history模式
history模式URL：http://www.abc.com/hello
有的时候出于强迫症，不能忍受模式下的URL上存在#符号，或者是出于业务需求，URL不能带#号。这个时候要考虑采用vue-router的history模式，history模式的前端配置与上文大同小异，但是由于history模式下URL 路径的跳转是vue-router利用h5的history API动态添加的，而手动刷新页面会导致找不到路由从而产生404错误，因此还需要对服务端进行配置，将路由重定向到一级页面
关注微信公众号学习更多前端技术