标签：vue 技术 基础 targe pat routes path blank 映射
v-router是vue的一个核心插件，vue+vue-router主要用来做SPA（单页面应用）的。
什么是SPA：就是在一个页面中，有多个页签，我们选择页签显示不同的内容，但页面不跳转。
例如：
在网易云音乐的主页中，发现音乐、我的音乐、朋友这三个页签就是单页面应用。当我们切换他们时，可以观察到url的变化：
这里看到的url改变（路由改变）的路由是vue-router提供的，而不是对应django的路由系统（前后端分离的项目，django只提供API的路由）。
vue-router官方文档：https://router.vuejs.org/zh/
下载vue-router.js：https://unpkg.com/vue-router/dist/vue-router.js
由于vue-router是依赖vue.js库的，所以要先引入vue.js：
<script src="./static/vue.js"></script> <script src="./static/vue-router.js"></script>
<body> <div id="app"> </div> <script src="./static/vue.js"></script> <script src="./static/vue-router.js"></script> <script> // 主页组件 const Home = { data() { return {} }, template: ` <div> 我是Home </div> ` } // 课程页面组件 const Course = { data() { return {} }, template: ` <div> 我是Course </div> ` } // VueRouter实例，其中的routes列表属性中定义具体的路由映射，url-->组件 const router = new VueRouter({ routes: [ { path: ‘/‘, component: Home }, { path: ‘/course‘, component: Course } ] }) let App = { data() { return {} }, // 最前面一个header，提供标签，标签不是<a>标签，而是<router-link> // 该标签可以通过to属性的url在routes中匹配到对应的路由，然后找到对应组件，渲染到<router-view>的位置 template: ` <div> <div class="header"> <router-link to = "/">首页</router-link> <router-link to = "/course">课程</router-link> </div> <router-view></router-view> </div> ` } var vm = new Vue({ el: "#app", data() { return {} }, router, template: ` <div> <App></App> </div> `, components: { App } }) </script> </body>
其中最重要的就是VueRouter实例中的routes的配置，以及App组件中使用<router-link>和<router-view>。还有个最重要的就是，vue实例中的router属性，实际上是router:router（名字相同可以缩写为router）。
实现效果：
加上一些简单样式后，效果更明显：
66
标签：vue 技术 基础 targe pat routes path blank 映射
原文地址：https://www.cnblogs.com/leokale-zz/p/12275188.html
