什么是路由

  1. 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

  2. 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

  3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

在 vue 中使用 vue-router

  1. 导入 vue-router 组件类库：
  1.  <script src="./lib/vue-router-2.7.0.js"></script>
  1. 使用 router-link 组件来导航
  1. <router-link to="/login">登录</router-link>
  2. <router-link to="/register">注册</router-link>
  1. 使用 router-view 组件来显示匹配到的组件
  1. <router-view></router-view>
  1. 创建使用Vue.extend创建组件
  1.     // 4.1 使用 Vue.extend 来创建登录组件
  2.     var login = Vue.extend({
  3.       template: '<h1>登录组件</h1>'
  4.     });
  5.  
  6.     // 4.2 使用 Vue.extend 来创建注册组件
  7.     var register = Vue.extend({
  8.       template: '<h1>注册组件</h1>'
  9.     });
  1. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
  1. // 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
  2.     var router = new VueRouter({
  3.       routes: [
  4.         { path: '/login', component: login },
  5.         { path: '/register', component: register }
  6.       ]
  7.     });
  1. 使用 router 属性来使用路由规则
  1. // 6. 创建 Vue 实例，得到 ViewModel
  2.     var vm = new Vue({
  3.       el: '#app',
  4.       router: router // 使用 router 属性来使用路由规则
  5.     });

案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7.     <script src="../../vue-2.4.0.js"></script>
  8.     <script src="../../vue-router.js"></script>
  9.     <style>
  10.  
  11.         .router-link-active{
  12.             color: red;
  13.             font-weight: bold;
  14.         }
  15.         .v-enter,.v-leave-to{
  16.             opacity: 0;
  17.             transform: translateX(100px);
  18.         }
  19.         .v-enter-avtive,.v-leave-active{
  20.             opacity: 1;
  21.             transition: all 0.8s ease;
  22.         }
  23.  
  24.     </style>
  25. </head>
  26. <body>
  27. <div class="app">
  28. <!--    <a href="#/login">登录</a>-->
  29. <!--    <a href="#/register">注册</a>-->
  30.  
  31.     <router-link to="/login">登录</router-link>
  32.     <router-link to="/register">注册</router-link>
  33.  
  34. <!--    路由容器-->
  35.     <transition mode="out-in">
  36.         <router-view></router-view>
  37.     </transition>
  38.  
  39. </div>
  40.  
  41. <script>
  42.     var login = {
  43.         template :'<h3>登录</h3>'
  44.     }
  45.     var register = {
  46.         template :'<h3>注册</h3>'
  47.     }
  48.  
  49.     //路由
  50.     var routerObj = new VueRouter({
  51.         //route     //路由匹配规则
  52.         routes:[
  53.             //路由规则
  54.             //参数一：path  路由监听链接
  55.             //参数二：component   如果匹配到 path 就展示 component 属性对应的组件  （必须是组件模板对象，不能是组件名称）
  56.             { path:"/", redirect:'/login' },     //redirect  重定向 （注意：此处是前端页面重定向，与 node 重定向不同）
  57.             { path:'/login', component : login },
  58.             { path:'/register', component : register }
  59.         ]
  60.         // linkActiveClass   修改 Vue-router 提供的默认类名
  61.     });
  62.  
  63.     var vm = new Vue({
  64.         el:'.app',
  65.         data:{},
  66.         methods:{},
  67.         router:routerObj        //建立 router 关联
  68.     });
  69. </script>
  70. </body>
  71. </html>

在路由规则中定义参数

  1. 在规则中定义参数：
  1. { path: '/register/:id', component: register }
  1. 通过 this.$route.params来获取路由中的参数：
  1. var register = Vue.extend({
  2.       template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>'
  3. });

使用 children 属性实现路由嵌套

  1.   <div id="app">
  2.     <router-link to="/account">Account</router-link>
  3.  
  4.     <router-view></router-view>
  5.   </div>
  6.  
  7.   <script>
  8.     // 父路由中的组件
  9.     const account = Vue.extend({
  10.       template: `<div>
  11.         这是account组件
  12.         <router-link to="/account/login">login</router-link> |
  13.         <router-link to="/account/register">register</router-link>
  14.         <router-view></router-view>
  15.       </div>`
  16.     });
  17.  
  18.     // 子路由中的 login 组件
  19.     const login = Vue.extend({
  20.       template: '<div>登录组件</div>'
  21.     });
  22.  
  23.     // 子路由中的 register 组件
  24.     const register = Vue.extend({
  25.       template: '<div>注册组件</div>'
  26.     });
  27.  
  28.     // 路由实例
  29.     var router = new VueRouter({
  30.       routes: [
  31.         { path: '/', redirect: '/account/login' }, // 使用 redirect 实现路由重定向
  32.         {
  33.           path: '/account',
  34.           component: account,
  35.           children: [ // 通过 children 数组属性，来实现路由的嵌套
  36.             { path: 'login', component: login }, // 注意，子路由的开头位置，不要加 / 路径符
  37.             { path: 'register', component: register }
  38.           ]
  39.         }
  40.       ]
  41.     });
  42.  
  43.     // 创建 Vue 实例，得到 ViewModel
  44.     var vm = new Vue({
  45.       el: '#app',
  46.       data: {},
  47.       methods: {},
  48.       components: {
  49.         account
  50.       },
  51.       router: router
  52.     });
  53.   </script>

watch属性的使用

  1. 监听data中属性的改变：
  1. <div id="app">
  2.     <input type="text" v-model="firstName"> +
  3.     <input type="text" v-model="lastName"> =
  4.     <span>{{fullName}}</span>
  5.   </div>
  6.  
  7.   <script>
  8.     // 创建 Vue 实例，得到 ViewModel
  9.     var vm = new Vue({
  10.       el: '#app',
  11.       data: {
  12.         firstName: 'jack',
  13.         lastName: 'chen',
  14.         fullName: 'jack - chen'
  15.       },
  16.       methods: {},
  17.       watch: {
  18.         'firstName': function (newVal, oldVal) { // 第一个参数是新数据，第二个参数是旧数据
  19.           this.fullName = newVal + ' - ' + this.lastName;
  20.         },
  21.         'lastName': function (newVal, oldVal) {
  22.           this.fullName = this.firstName + ' - ' + newVal;
  23.         }
  24.       }
  25.     });
  26.   </script>
  1. 监听路由对象的改变：
  1. <div id="app">
  2.     <router-link to="/login">登录</router-link>
  3.     <router-link to="/register">注册</router-link>
  4.  
  5.     <router-view></router-view>
  6.   </div>
  7.  
  8.   <script>
  9.     var login = Vue.extend({
  10.       template: '<h1>登录组件</h1>'
  11.     });
  12.  
  13.     var register = Vue.extend({
  14.       template: '<h1>注册组件</h1>'
  15.     });
  16.  
  17.     var router = new VueRouter({
  18.       routes: [
  19.         { path: "/login", component: login },
  20.         { path: "/register", component: register }
  21.       ]
  22.     });
  23.  
  24.     // 创建 Vue 实例，得到 ViewModel
  25.     var vm = new Vue({
  26.       el: '#app',
  27.       data: {},
  28.       methods: {},
  29.       router: router,
  30.       watch: {
  31.         '$route': function (newVal, oldVal) {
  32.           if (newVal.path === '/login') {
  33.             console.log('这是登录组件');
  34.           }
  35.         }
  36.       }
  37.     });
  38.   </script>

computed计算属性的使用

  1. 默认只有getter的计算属性：、
  1. <div id="app">
  2.     <input type="text" v-model="firstName"> +
  3.     <input type="text" v-model="lastName"> =
  4.     <span>{{fullName}}</span>
  5.   </div>
  6.  
  7.   <script>
  8.     // 创建 Vue 实例，得到 ViewModel
  9.     var vm = new Vue({
  10.       el: '#app',
  11.       data: {
  12.         firstName: 'jack',
  13.         lastName: 'chen'
  14.       },
  15.       methods: {},
  16.       computed: { // 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
  17.         fullName() {
  18.           return this.firstName + ' - ' + this.lastName;
  19.         }
  20.       }
  21.     });
  22.   </script>
  1. 定义有getter和setter的计算属性：
  1. <div id="app">
  2.     <input type="text" v-model="firstName">
  3.     <input type="text" v-model="lastName">
  4.     <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
  5.     <input type="button" value="修改fullName" @click="changeName">
  6.  
  7.     <span>{{fullName}}</span>
  8.   </div>
  9.  
  10.   <script>
  11.     // 创建 Vue 实例，得到 ViewModel
  12.     var vm = new Vue({
  13.       el: '#app',
  14.       data: {
  15.         firstName: 'jack',
  16.         lastName: 'chen'
  17.       },
  18.       methods: {
  19.         changeName() {
  20.           this.fullName = 'TOM - chen2';
  21.         }
  22.       },
  23.       computed: {
  24.         fullName: {
  25.           get: function () {
  26.             return this.firstName + ' - ' + this.lastName;
  27.           },
  28.           set: function (newVal) {
  29.             var parts = newVal.split(' - ');
  30.             this.firstName = parts[0];
  31.             this.lastName = parts[1];
  32.           }
  33.         }
  34.       }
  35.     });
  36.   </script>

watch、computed和methods之间的对比

  1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  2. methods方法表示一个具体的操作，主要书写业务逻辑；
  3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

06-Vue路由的更多相关文章

  1. 06 Vue路由简介,原理,实现及嵌套路由,动态路由

    路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...

  2. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  3. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  4. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  5. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  6. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  7. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  8. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  9. 3种vue路由传参的基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  10. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

随机推荐

  1. 2016 ACM/ICPC亚洲区青岛站

    A B C D E F G H I J K L M O O O O     $\varnothing$     $\varnothing$  $\varnothing$  $\varnothing$  ...

  2. LeetCode 1150. Check If a Number Is Majority Element in a Sorted Array

    原题链接在这里:https://leetcode.com/problems/check-if-a-number-is-majority-element-in-a-sorted-array/ 题目: G ...

  3. PATA1082Read Number in Chinese

    有几点需要注意的地方一是将right转化为与left在在同一节 while (left + 4 <= right) { right -= 4;//每次将right移动4位,直到left与righ ...

  4. c04--数组

    0.展示PTA总分 1.本章学习内容总结 1.1学习内容总结 数组查找: 1.遍历法查找:从头遍历数组找对应数据. 2.二分法查找:适用于按顺序排列的整形数组. 插入数据: 先找到该数据,对数组进行移 ...

  5. 使用dozer将DTO转化为DO

    DTO,就是Data Transfer Object,数据传输对象,可以简单理解成请求中的对象. PO,就是Persistant Object,持久化对象,它跟持久层(通常是关系型数据库)的数据结构形 ...

  6. Qt应用开发常见问题

    Qt判断当前操作系统? 可使用宏判断,例如: #ifdef Q_OS_MAC //mac ... #endif #ifdef Q_OS_LINUX //linux ... #endif #ifdef ...

  7. Linux 就该这么学 CH05 用户的身份和文件权限

    1 用户权限与能力 超级用户root拥有最高的系统所有权,能够管理系统的各项功能,如添加.删除用户:启动或关闭服务进程:开启或禁用硬件设备等. 用户身份分类: 系统管理员root :UID = 0; ...

  8. Appium Grid并发测试

    背景 Selenium玩的比较6的同学比较清楚:在Selenium中三大组件中有包含了Selenium Grid,而其作用就是分布式执行测试用例.主要的应用场景在于: 缩短测试执行时间,提高自动化测试 ...

  9. thinkphp 6.0 swoole扩展websocket使用教程

    前言 ThinkPHP即将迎来最新版本6.0,针对目前越来越流行Swoole,thinkphp也推出了最新的扩展think-swoole 3.0. 介绍 即将推出的tp6.0,已经适配swoole.并 ...

  10. Java选择结构和循环结构

    1.选择结构 ①.ifif(){ } if(){}else{} if(){}else if(){}else if(){}else{} ②.switch switch (表达式) { case 常量 1 ...