vue-router
什么是路由
路由是一个网络工程里面的术语
路由就是通过网络把信息从源地址传输到目的地的活动 — 维基百科
后端路由
是url和后端逻辑的对应关系
前端路由
是url和组件的对应关系
前端路由核心就是改变url但是页面不进行整体的刷新
vue-router
vue-router是vue官方的路由插件 它和vue.js是深度集成的，适合用于构建单页面应用
官网 https://router.vuejs.org/zh/
vue是基于路由的组件的
路由用于设定访问路径，将路径和组件映射起来
在vue-router的单页面应用中，页面的路径改变就是组建的切换
前端路由规则
- 前端路由的核心是改变URL，但是页面不进行整体的刷新
- URL的hash也就是锚点(#), 本质上是改变window.location的href属性
- 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新
HTML5的history模式：pushState（本人也不是很了解）
history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面
- history.pushState({},'','url')
- 将url压入栈结构
- 栈结构的特点是先进后出
- 可以返回
- history.replaceState({},'','url')
- 替换url
- 不能返回
- history.back()
- 返回
- history.forward()
- 前进
- history.go()
- history.go(-1)等价于history.back()
- history.go(1)等价于history.forward()
单页面应用步骤七步骤：
1、引入JS文件(vue和Vuerouter)
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
2、使用 router-link 组件来导航
通过to属性来指定链接
router-link默认会被渲染成一个超链接标签
<router-link to="链接名">棒棒糖</router-link>
将路由匹配到的组件渲染到<router-view></router-view>组件里
随项目情况而视，可写可不写外层盒子
<p class="tab-content">
<router-view></router-view>
</p>
作用：通过Vue的解析，解析成a标签 点击过后切换组件的显示，而显示的组件是有to属性来控制的
const Foo = {
template: '<div><img src="/img/01.jpg" alt=""></div>'}
5、写路由规则（每一个路由映射一个组件）
/ 这里定义的是URL和组件的对应关系
const routes = [{
path: 'to属性的链接名',
component:组件中的组件名
}]
const routes = [{
path: '/foo',
component: Foo
}]
6、创建router实例，传入routes配置，也可传入其它配置参数
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
7、挂载到根实例化,通过 router 配置参数注入路由,从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 9 </head> 10 11 <body> 12 <!-- 1. 导入vue和vue-router 13 2. 定义跳转路径 router-link 14 3. router-view 15 4. 写组件 16 5. 写路由规则 17 6. 创建路由对象 18 7. 挂载到顶级Vue实例上面去 --> 19 20 <!-- 2. 定义跳转路径 router-link --> 21 <div id="app"> 22 <p> 23 <router-link to="/foo">棒棒糖</router-link> 24 <router-link to="/bar">水果糖</router-link> 25 <router-link to="/girl">奶糖</router-link> 26 </p> 27 <!-- 3. router-view --> 28 <div class="tab-content"> 29 <router-view></router-view> 30 31 </div> 32 </div> 33 <!-- 1.引入JS文件 --> 34 <script src="https://unpkg.com/vue/dist/vue.js"></script> 35 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 36 <script> 37 // 4. 写组件 38 const Foo = { 39 template: '<div><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3231173445,2581934253&fm=26&gp=0.jpg" alt=""></div>' 40 } 41 const Bar = { 42 template: '<div><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1013445547,1049096974&fm=26&gp=0.jpg" alt=""></div>' 43 } 44 const Girl = { 45 template: '<div><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1984603473,1171836157&fm=26&gp=0.jpg" alt=""></div>' 46 } 47 // 5. 写路由规则 48 const routes = [{ 49 path: '/foo', 50 component: Foo 51 }, { 52 path: '/bar', 53 component: Bar 54 }, { 55 path: '/girl', 56 component: Girl 57 }] 58 // 6. 创建路由对象 59 const router = new VueRouter({ 60 routes 61 }) 62 // 7. 挂载到顶级Vue实例上面去 63 const app = new Vue({ 64 el: '#app', 65 router 66 }) 67 </script> 68 </body> 69 70 </html>
通过这个简单的案例我们可以看出来，只要记住这七个步骤，就可以简单的实现单页面应用的导航组件，点击第几个router-link组件，相对应的<router-view></router-view>组件出现映射的内容
可以在打印台清晰明了的看见布局，router-link和router-view组件之间的关系