路由

vue-router是Vue的工具库
使用路由需要导入router库，和vue.js一起使用

路由的使用分为四部

1. 盛放每个页面对应的内容
   <router-link to='/home'>首页</router-link>//链接相当于a标签
   <router-link to='/detail'>详情页</router-link>//链接相当于a标签
   <router-view></router-view>

2. 创建组件

var Home（组件名）={
    template:`
    里面是内容
    `
}

3.配置路由

const  router=[
          {path:"/home",template:"组件名"}
    ]

4.创建路由实例

const  routes= new VueRouter({
      routes:router
})

5.把路由器挂到vue实例上

案例

<div id="app">
        <router-link to="/home">首页</router-link>
        <router-link to="/sing">详情页</router-link>
        <router-view></router-view>
    </div>
    <script>
        var Home={
            template:`
                    <h1>这是首页</h1>
                `
        }
        var Sing={
            template:`
            
                    <h1>这是副页</h1>
            `
        }
        const route=[
               {path:"/home",component:Home},
               {path:"/sing",component:Sing}
        ]
        const router= new VueRouter({
            routes:route
        })
        new Vue({
            el:"#app",
            router:router
        })
    </script>