路由
vue-router是Vue的工具库
使用路由需要导入router库，和vue.js一起使用
路由的使用分为四部
- 盛放每个页面对应的内容
<router-link to='/home'>首页</router-link>//链接相当于a标签
<router-link to='/detail'>详情页</router-link>//链接相当于a标签
<router-view></router-view>
- 创建组件
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>
