1.编写路由,routes;包括路径,及映射组件
const routes=[
{path:"/",component:First},
{path:"/second",component:Second},
{path:"/three",component:Three},
{path:"/four",component:Four}
]
2.创建路由实例
const router=new VueRouter({
mode:"history", //切换路由模式为history,不然路径为/#/home
scrollBehavior:()=>({ //设置滚动条位置
y:0
}),
linkActiveClass:"active", //设置点击样式
routes, //这个好像只能用routes,注意没有r
})
mode设置为history表示利用了history.pushState api来完成页面跳转,无需重新加载页面
mode的三种模式:
1)hash模式:使用url hash值来作为路由,值所有浏览器
2)history模式:依赖H5 history api和服务器配置
3)abstract:支持所有JavaScript运行环境,如果没有发现浏览器的api,会强制进入该模式;
3.挂载实例
new Vue({
el:"#app",
router
})
网友评论