Vue路由

Vue属于单页应用（SPA），即整个应用程序中只有一个html页面。

在单页应用中（SPA），由于只是更改DOM来模拟多页面，所以页面浏览历史记录的功能就丧失了。此时，就需要前端路由来实现浏览历史记录的功能。

 一、Vue路由基础

配置路由跟组件写法基本相似，只不过需要router-view放置跳转以后渲染的内容、<router-link>实现页面跳转来配置

 <!-- router-view放置跳转以后渲染的内容 -->
     <router-view></router-view>

 <!-- <router-link>实现页面跳转 to跳转路径  router-link最终渲染成了a标签-->
     <router-link to="/index">首页</router-link>
     

之后还需要引入路由,这里需要注意的是引用路由文件时要放在vue.js后面，否则报错

 <script src="js/vue.js"></script> 
        <!-- 专门引入路由 -->
        <script src="js/vue-router.js"></script>

定义路由组件

 var index={
     template:'#index' \\组件ID
     }

创建路由实例

var  router=new VueRouter({
                routes:[
                    {
                        // path路线 component组件
                        path:'/index',
                        component:index
                    }
                ]
            })

 挂载路由

 new Vue({
       el:'#app',
      // 挂载路由
      router:router
    })

 二、嵌套路由

嵌套路由需要在书写模板中写入需要嵌套的路由组件

然后在路由的实例中写以下格式代码

 书写模板中：

<template id="index">
     <main>
        <h3>这是首页</h3>
        <router-view></router-view>
        <router-link to="/shop">京东超市</router-link>
   </main>
</template>

路由实例中： 

 children:[
      {
       path:'/shop',
        component:shop
        }
        ] //children需要用方括号将嵌套的路由组件包裹