Vue学习之路由vue-router小结（九）
2019-08-14 10:01:52来源：博客园 阅读 ()
一、路由：
1、后端路由：
对于普通网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
2、前端路由：
对于单页面应用程序来说，主要通过URL中的hash(#号）来实现不同页面之间的切换，同时，hash之间有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
3、在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由！！！
二、安装：
官网：https://router.vuejs.org/zh/installation.html
JS：https://unpkg.com/vue-router/dist/vue-router.js
三、使用：
1、导入及创建对象：
<!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>路由</title> <script src="./lib/vue.js"></script> <!-- 1.安装vue-router路由模块 --> <script src="./lib/vue-router.js"></script> <style></style> </head> <body> <div id="app"> <!-- <a href="#/login">登录</a> <a href="#/register">注册</a> --> <!-- router-link 默认渲染成一个 a 标签 --> <router-link to="/login" tag="span">登录</router-link> <router-link to="/register">注册</router-link> <!-- 这是 vue-router 提供的元素，专门用来当做占位符的，将来， 路由规则，匹配到的组件，就会展示到这个 router-view 中去--> <!-- 我们可以把 router-view 认为是一个占位符 “ 留坑” --> <router-view></router-view> </div> <script> var login = { template: "<h1>登录组件</h1>" }; var register = { template: "<h1>注册组件</h1>" }; // 2.创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有了 //一个路由的构造函数，叫做 VueRouter // 在new 路由对象的时候，可以为 构造函数，传递一个配置对象 var routerObj = new VueRouter({ // route 这个配置对象中的 route 表示【路由匹配规则】的意思 routes: [ //路由匹配规则 // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性： // 属性1：path 表示监听哪个路由链接地址 // 属性2： component 表示，如果路由是前面匹配到的 path，则展示 component 属性对应的那个组件 //component 的属性值，必须是一个组件的模板对象，不能是组件的引用名称 { path: "/login", component: login }, { path: "/register", component: register } ] }); var vm = new Vue({ el: "#app", data: {}, methods: {}, // 将路由规则对象，注册到VM 实例上，用来监听 url地址的变化，然后展示对应的组件 router: routerObj }); </script> </body> </html>
2、重定向（打开时默认导向的位置：可以在地址栏上查看区别）
{ path: "/", redirect: "/login" },
例子中，是默认打开时就导向login页面
3、设置路由高亮的方式（两种：第二种直接样式里定义即可）：
<!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>路由</title> <script src="./lib/vue.js"></script> <!-- 1.安装vue-router路由模块 --> <script src="./lib/vue-router.js"></script> <style> /* 2.第二种设置路由高亮的方式---直接设置，不需要再定义 */ .router-link-active { color: red; font-weight: 800; font-style: italic; font-size: 80px; text-decoration: underline; background-color: green; } /* 1.1第一种设置路由高亮的方式--需要定义下 */ .myactive { color: red; font-weight: 800; font-style: italic; font-size: 80px; text-decoration: underline; background-color: green; } </style> </head> <body> <div id="app"> <!-- <a href="#/login">登录</a> <a href="#/register">注册</a> --> <!-- router-link 默认渲染成一个 a 标签 --> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> <!-- 这是 vue-router 提供的元素，专门用来当做占位符的，将来， 路由规则，匹配到的组件，就会展示到这个 router-view 中去--> <!-- 我们可以把 router-view 认为是一个占位符 “ 留坑” --> <router-view></router-view> </div> <script> var login = { template: "<h1>登录组件</h1>" }; var register = { template: "<h1>注册组件</h1>" }; // 2.创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有了 //一个路由的构造函数，叫做 VueRouter // 在new 路由对象的时候，可以为 构造函数，传递一个配置对象 var routerObj = new VueRouter({ // route 这个配置对象中的 route 表示【路由匹配规则】的意思 routes: [ //路由匹配规则 // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性： // 属性1：path 表示监听哪个路由链接地址 // 属性2： component 表示，如果路由是前面匹配到的 path，则展示 component 属性对应的那个组件 //component 的属性值，必须是一个组件的模板对象，不能是组件的引用名称 // redirect 是重定向，定义打开页面的默认的导向哪个页面，可以在地址栏中具体查看 { path: "/", redirect: "/login" }, { path: "/login", component: login }, { path: "/register", component: register } ] // 1.2第一种设置路由高亮的方式--需要定义的部分 // linkActiveClass: "myactive" }); var vm = new Vue({ el: "#app", data: {}, methods: {}, // 将路由规则对象，注册到VM 实例上，用来监听 url地址的变化，然后展示对应的组件 router: routerObj }); </script> </body> </html>
4、设置路由的动画：
样式内加上：
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.8s ease;
}
然后：
<transition mode="out-in"> <router-view></router-view> </transition>
原文链接:https://www.cnblogs.com/21-forever/p/11108691.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：深入V8引擎-AST(2)
- vue.js开发环境搭建教程 2020-03-16
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
- vue-cli中打包图片路径错误的解决方法 2020-01-17
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
