#锚点：并不会让页面真正的刷新（单页面应用），防止页面刷新，便于收藏，便于后退
1.router-view 占位符、容器
2.路由表 new VueRouter
3.添加到vm对象身上去 router:路由表名字
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.6/dist/vue-router.js"></script>
<body>
<div id="div1">
<a href="#/a">画面1</a>
<a href="#/b">画面2</a>
<a href="#/c">画面3</a>
<!-- 路由 -->
<router-view></router-view>
</div>
</body>
<script>
let router = new VueRouter({
routes: [{
path: "/a",
component: {
template:"<div>aaaa</div>"
}
},{
path: "/b",
component: {
template:"<div>bbb</div>"
}
},{
path: "/c",
component: {
template:"<div>ccc</div>"
}
}]
})
let vm = new Vue({
el: "#div1",
router
})
</script>
点击：router-link to="/a" 类似于a标签
路由有class，可以增加样式 touter-link-active 路由有两种方式
方式一
<router-link to="a">画面1</router-link>
网友评论