一 、概要
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。
在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器
二 、基础使用
1 、创建Router
<script>
const home = Vue.component('home', {
template: '<div><h1>首页</h1><p v-text="msg"></p></div>',
data() {
return {
msg: '欢迎来到首页'
}
}
});
const movies = Vue.component('movie', {
template: '<div><h1>电影</h1></div>'
});
const cinema = Vue.component('movie', {
template: '<div><h1>影院</h1></div>'
});
</script>
2、 映射路由
<script>
const routes = [
{path: '/', component: home},
{path: '/movies', component: movies},
{path: '/cinemas', component: cinema},
];
</script>
3 、创建 router 实例，然后传 routes 配置
<script>
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
});
</script>
4、创建Vue实例和挂载路由。
<script>
new Vue({
el: "#app",
router,
})
</script>
5、 使用router-link指令
<div id="app">
<ul class="nav nav-pills">
<li><router-link to="/">首页</router-link></li>
<li><router-link to="/movies">电影</router-link></li>
<li><router-link to="/cinemas">影院</router-link></li>
</ul>
</div>
6 、使用 <router-view>
<div id="app">
<router-view></router-view>
</div>
7、总结
JavaScript
- 创建组件：创建单页面应用需要渲染的组件
- 创建路由实例
- 路由列表
- 创建Vue实例和挂载路由
HTML
- 使用
<router-link>指令 - 使用
<router-view>标签
8、 <router-link>
跳转的方式有三种
- 方式1：直接修改地址栏
- 方式2：this.$router.push(‘路由地址’)
- 方式3：
<router-link to="路由地址"></router-link>
三、流程图
image
