Vue路由和嵌套路由介绍。。。

       介绍 Vue 路由，首先我们要知道一个概念 SPA，当然这个 SPA 不是我们平时生活中说的美女美容护肤之类的。。。

    这里的 SPA，它是single page applicetion 的简称；它属于单页面应用。它适合内容展示页面，但是交互性不强。

    在原生 JS 中，要实现单页面请求，是通过检测锚点的变化（原生 JS 中 location，观察 hash 值的变化），来请求不同的数据，从而显示在界面上。

    现在，我就给大家来介绍在 Vue 中是如何来处理路由的变化的。。。

    下面我们来看一下简单的路由配置的步骤：

  

  第一步，而且也是最基础的一步，引入vue 和 vue-router 插件，vue-router 是给 vue 提供的路由管理的插件,利用 hash 的变化控制动态组件的切换。

    下载方式：npm install vue-router

  

 第二步，指定链接跳转。在 JS 中我们是通过 来指定链接跳转的，而在 Vue 中 我们是通过 

  来指定链接跳转的，具体看代码:

 

   首页
   新闻
 

 

 第三步：配置路由（在 Js 文件中进行配置的）

 

 在配置路由的过程中，一定要注意 routes 是 vue 内置的属性，而且组件名称一定要相同！就自己原来踩过坑特意提醒大家。。。

 第四步：挂载

 

 由于挂载的属性名和配置的变量名 router 相同 ，可以直接简写为 router，名字不相同的情况下不可以简写为 router ，语法为： router : 配置变量名 。
  

 第五步，也是最后一步，渲染页面！通过 来渲染页面
 

   首页
   新闻
    
 

 简单的路由配置步骤就是这些啦，是不是很简单呢。。。

 

 在简单路由配置的基础上，还有嵌套路由。

 我们在很多网页上会看到一层套一层的页面跳转，这种页面跳转的效果就是通过嵌套路由来实现的，嵌套路由和路由在写法上最大的不同就是在路由配置上，其他都相同。

 参考上面的代码：

 第三步：配置路由：

 HTML部分：

 
 

  

  JS部分：

  var Home = {
         template:'#homeList'
     }
     var News = {
         template:'#newsList'
     }
     var news_one = {
         template:'

我是新闻一

'
     }
      var news_two = {
         template:'

我是新闻二

'
     }
     var Home_one = {
         template:'

请登录

'
     }
      var Home_two = {
         template:'

请注册

'
     }
     var router = new VueRouter({
         routes:[
             {path:'/home',
             component:Home,
             children:[
                 {path:'/home/home_one',component:Home_one},
                 {path:'/home/home_two',component:Home_two}
             ]},
             {path:'/news',
             component:News,
             children:[
                 {path:'/news/news_one',component:news_one},
                 {path:'/news/news_two',component:news_two},
             ]},
         ]
     })

  以上是 Vue 路由和嵌套路由的简单示例，希望可以帮到大家！

  当然还有路由的改变，路由的命名以及路由钩子等等，下次再来和大家分享这些奥。。。