vue 知识点整理——路由（vue-router）

什么是路由

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

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

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

在 vue 中使用 vue-router

1. 导入 vue-router 组件类库：

import Router from 'vue-router'

2. 使用 router-link 组件来导航

登录 // tag 可以通过配置 tag 属性生成别的标签
注册

3. 使用 router-view 组件来显示匹配到的组件

4. 创建组件

  login.vue
  register.vue

5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则

// 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
    var router = new VueRouter({
      routes: [
        { 
          path: '/login', 
          component: login
        },
        { 
          path: '/register', 
          component: register 
        }
      ]
    });

6. 使用 router 属性来使用路由规则

// 6. 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 属性来使用路由规则 可缩写为 router
    });

动态路由匹配

在路由规则中定义参数

1. 在规则中定义参数：

{ path: '/register/:id', component: register }

2. 通过 this.$route.params来获取路由中的参数：

var register = Vue.extend({
      template: '
注册组件 --- {{this.$route.params.id}}
'
    });

响应路由参数的变化

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

捕获所有路由或 404 Not found 路由

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)：

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。如果你使用了History 模式，请确保正确配置你的服务器。

使用 children 属性实现路由嵌套

  

    Account

    
  

  

命名视图实现经典布局

1. 标签代码结构：

2. JS代码：

3. CSS 样式：