Vue----路由

##路由和前端路由

• 路由 ：不同路径 执行不同的操作
• 前端路由： 单页面应用中由前端控制url 实现页面的切换效果

vue-router 实现页面的切换

单页面应用（SPA）页面切换页面的效果是通过在一个页面内，根据不同的 url 切换不同的组件实现的

使用vue-router

• 首页 是一个自定义标签，用于切换路由，点击它页面的 url 会切换，如果有匹配的组件，会把组件渲染到 router-view
• 用于展示当前路由对应的组件
• 配置路由映射表，即路由和组件的对应关系；
• 创建 vue-router 实例
• 给 Vue 实例配置 router 属性

1. 创建组件
2. 配置路由映射表
3. 把路由映射表传递给VueRouter进行注册

let home = {
    template: '<div>首页</div>'
  };

  let list = {
    template: '<div>列表页</div>'
  };

  // 配置路由映射表
  let routes = [
    {
      path: '/',
      component: home
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/list',
      component: list
    },
    {
      path: '*',
      component: home
    }
  ];

  let router = new VueRouter({
    routes
  });

  let vm = new Vue({
    el: '#app',
    data: {},
    router
  })

路由方法

• this.$router.go(-1) 退回到上一个页面
• this.$router.push(router|router-config)调转到指定路由

路由嵌套

在路由映射表中配置children属性 children 就是子级路由 和路由嵌套

路由参数

• vue-router 的路由可以像 Node.js 的动态路由一样，可以配置动态路由；例如 /text/:id/:a 此时 id 和 a 就是动态的路由
• 而我们真正访问路由时，如 /text/12/13 此时的12和13就称为动态路由的参数

动态路由参数的获取

this.$route.params