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 中我们是通过 <a href='#'></a> 来指定链接跳转的，而在 Vue 中 我们是通过 

 <router-link to=''></router-link> 来指定链接跳转的，具体看代码:

 <div id='app'>
   <router-link to='/home'>首页</router-link>
   <router-link to='/news'>新闻</router-link>
  </div>

 

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

 <script>
  var Home = {
    template:'<div>首页内容</div>'
  }
  var News = {
    template:'<div>新闻内容</div>'
  }
  var router = new VueRouter({
    routes:[
      {path:'/home',component:Home},
      {path:'/news',component:News}
    ]
  })
  new Vue({
    el:'#app'
  })
</script>

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

 第四步：挂载

 <script>
  new Vue({
    el:'#app',
    router
  })
 </script>

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

 第五步，也是最后一步，渲染页面！通过 <router-view></router-view> 来渲染页面
 <div id='app'>
   <router-link to='/home'>首页</router-link>
   <router-link to='/news'>新闻</router-link>
   <router-view></router-view> 
 </div>

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

 

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

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

 参考上面的代码：

 第三步：配置路由：

 HTML部分：

 <template id='homeList'>
   <div>
     <h1>首页数据</h1>
       <div>
         <router-link to='/home/home_one'>登录</router-link>
         <router-link to='/home/home_two'>注册</router-link>
       </div>
         <router-view></router-view>
       </div>
  </template>
  <template id='newsList'>
    <div>
      <h1>新闻页</h1>
        <div>
          <router-link to='/news/news_one'>新闻一</router-link>
          <router-link to='/news/news_two'>新闻二</router-link>
        </div>
          <router-view></router-view>
        </div>
  </template>

  

  JS部分：

  var Home = {
         template:'#homeList'
     }
     var News = {
         template:'#newsList'
     }
     var news_one = {
         template:'<div>我是新闻一</div>'
     }
      var news_two = {
         template:'<div>我是新闻二</div>'
     }
     var Home_one = {
         template:'<p>请登录</p>'
     }
      var Home_two = {
         template:'<p>请注册</p>'
     }
     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 路由和嵌套路由的简单示例，希望可以帮到大家！

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