标签：data 检测 ati var 连接 不同 使用 back orm
路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。
在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。
要实现前端路由，需要解决两个核心：
如何改变 URL 却不引起页面刷新？
如何检测 URL 变化了？
以下介绍vue路由方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="lib/vue-2.4.0.js"></script> <!-- 1. 安装 vue-router 路由模块 --> <script src="lib/vue-router-3.0.1.js"></script> <style> /* 当展示哪个路由，router-link标签就会加上两个class router-link-exact-active router-link-active */ .router-link-active, .myactive { background-color: #1B6D85; } .v-enter, .v-leave-to { opacity: 0; transform: translateX(140px); } .v-enter-active, .v-leave-active { transition: all 0.5s ease; } .a{ width: 200px; height: 200px; background-color: red; } .b{ width: 200px; height: 200px; background-color: green; } </style> </head> <body> <div id="app"> <!-- 当url地址不同展示的组件不同 --> <!-- <a href="#/login">login</a> <a href="#/register">register</a> --> <!-- 也可以使用路由自带的标签 router-link 默认渲染为a标签 也可以使用tag 指定某个标签 --> <router-link to="/login" tag="span">login</router-link> <router-link to="/register" tag="span">register</router-link> <!-- vue-router 提供的元素，展示路由匹配到的组件 --> <transition mode="out-in"> <router-view></router-view> </transition> </div> <script> // 组件模板对象 var login={ template:"<div class=‘a‘>login</div>" } var register={ template:"<div class=‘b‘>register</div>" } // 2.创建路由对象。当导入路由的包时，就有了一个路由的构造函数 var rout=new VueRouter({ routes:[//路由匹配规则，是个数组可以匹配多个 //每个路由规则都是个对象，有两个必须的属性 1.path：路由连接地址 2.component 要展示的主件模板对象 //{path:‘/‘,component:login},//默认根路径为某个子组件 {path:‘/‘,redirect:‘/login‘}, //redirect 重定向，是根路径是跳转到某个url地址上 {path:‘/login‘,component:login}, {path:‘/register‘,component:register} ], linkActiveClass:‘myactive‘//设置默认的class值 }) // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: ‘#app‘, data: {}, methods: {}, router: rout // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件 }); </script> </body> </html>
标签：data 检测 ati var 连接 不同 使用 back orm
原文地址：https://www.cnblogs.com/shangrao/p/13088698.html
