2018-09-23 路由 （vue-router）

1.是Vue的工具库 vue-router.js

下载：
npm install vue 下载vue
npm install vue-router 下载vue-router

2.通过不同的url访问不同的页面 spa(single page application) 单页面应用

3.简单的路由

 <div id='app'>
       <!--//1.-->

       <router-link to='/home'>首页</router-link>
       <router-link to='/detail'>详情页</router-link>

       <!-- 盛放每个页面对应的内容-->
       <router-view></router-view>

   </div>

      //注意导入的先后顺序

    <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>

    <script>
        //2.创建路由组件

        var Home={
            template:`
                <h1>这是首页</h1>
            `
        }
        
        var Detail={
             template:`
                <h1>这是详情页</h1>
            `
        }
        
        //3.配置路由

        const routes=[
            {path:'/home',component:Home},
            {path:'/detail',component:Detail}
        ]
        
        //4.创建一个路由实例

//const  (a)
        const router=new VueRouter({
            routes:routes
        })
        
        //把路由挂载到vue实例上

       new Vue({
           el:'#app',
//写死的：（a）
           router:router
       })

    </script>