学习Vue路由的总结

学习Vue路由的总结

一.路由的基本概念和配置
路由中有三个基本的概念 route, routes, router
　

① route，它是一条路由,进入哪个路由显示哪个路由对应的内容

② routes 是一组路由
[{path: '/', name: '/', component: router }， {path: '/index', name: 'index', component: index}]

③ router 是一个机制，相当于一个管理者，它来管理路由。当this.$router.push('/'),从route 或 routes中找 ‘/’,找到后跳转到对应的文件

④ 客户端中的路由，实际上就是<router-view></router-view>
元素内容的改变。客户端路由有两种实现方式：基于hash 和基于html5 history api.

二.路由配置

① 先在入口文件下引入router.js

import router from 'router.js'

② 将router直接注入到根实例中

 new Vue({
    el: '#app',
    router,  // 注入到根实例中
    render: h => h(App)
 })

③ 再创建一个route.js用于存放 加载所有组件并指定访问路径

④ 用import 引入 Vue 和 vue-router
  import Router from 'vue-router'

⑤ 注册Vue组件 Vue.use(Router)

⑥ 创建router 
  path: 指定访问路径  
  name: 唯一名字相当于id,可以用来路径和传参 
  component: 组件上方引入的组件名,用来找组件的位置
  title是每页的标题

    exprots default new Router ({
        routes: [
          /* redirect 重定向 */
          {path: '/', redirect: '/index'},
          {
            path: '/index',
            name: 'index',
            component: Index,
            meta: {
              title: '首页'
            }
          },
          { /* Not Found 路由，必须是最后一个路由 */
            path: '*',
            component: NotFound,
            meta: {
              title: '找不到页面'
            }
          }
        ]
      })

⑦使用通过router-link 和 router-view
  router-link 相当于 a 标签  使用 to 跳转页面
    当router-link 处于选中状态时，vueRouter 会自动添加 .router-link-active 这个类
    因此我们也可以利用这个类来改变选中时的状态
    但直接设置 .router-link-active {color: red;} 它不会生效
    需要在类前面加一个a, a.router-link-active {color: red;}
    <router-link to="/index"></router-link>

  router-view 渲染定义的组件 它在什么位置,匹配的路径的组件就在什么位置

三.动态路由
有时需要在路径后加不同的值或通过路由传值,就需要动态路由

原理:
当整个vue-router 注入到根实例后，在组件的内部，可以通过this.$route 来获取到 router 实例
它有一个 params 属性, 来获得这个动态部分.它是一个对象
属性名，就是路径中定义的动态部分 id, 属性值就是router-link中 to 属性中的动态部分

    <router-link to="/index/123"></router-link>
    {
      path: '/user/:id',
      component: User
    }
    /* 在页面获取这个值  this.$route.params.id 和 Vuex 获取数据差不多 */
    export default {
      computed: { // 计算属性
        dynamicSegment () {
            return this.$route.params.id
        }
      }
    }

问题: 动态路由在来回切换时，由于它们都是指向同一组件，vue不会销毁再创建这个组件
而是复用这个组件,就是当第一次点击(如：user123)的时候，vue 把对应的组件渲染出来
但在user123, user456点击来回切换的时候
这个组件就不会发生变化了,这时如果想要在组件来回切换的时候做点事情
那么只能在组件内部利用 watch 来监听 $route 的变化。把上面的代码用监听 $route 实现

    <script>
        export default {
          data () {
            return {
              routerId: ''
            }
          },
          watch: {
            $route (to,from){
              // to表示的是你要去的那个组件，from 表示的是你从哪个组件过来的
              // 它们是两个对象，把它打印出来, 可以发现它们也有一个 params 属性
              console.log(to);
              console.log(from);
              this.routerId = to.params.id
            }
          }
        }
    </script>

四 .动态路由

在一个路由下需要几个子路由时,使用动态路由
在路由的设计上，首先进入到 home ,然后才能进入到phone, tablet 相当于进入到了home的子元素
vue 提供了 children 属性，它也是一组路由,相当于我们所写的routes

 {
      path:"/home",
　　　/* 下面这个属性也不少，因为，我们是先进入home页面，才能进入子路由 */
      component: home,
　　　/* 子路由 */
      children: [
        {
          path: "phone",
          component: phone
        },
        {
          path: "tablet",
          component: tablet
        },
        { /* 默认子路由 */
          path: '',
          component:  phone
        }
      ]
    }

注意: router-link 中的 to 进入子路由时,要加上父路由的路径

五..路由传参

Vue路由传参分为两大类
编程式导航 $router.push (推荐)
声明式导航 <router-link>

1.编程式导航
编程式导航传递有两种类型: 字符串, 对象
①字符串
这种方式是直接将路由地址以字符串的类型来跳转，这种方式简单但是不能传递参数
this.$router.push('/index')
②对象
传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数

1. 命名路由
命名路由有一个前提在路由配置的地方有 name
命名路由传递参数需要使用params来传递,目标页面接收传递参数时使用params
// 发送参数
this.$router.push({ name: 'news', params: { userId: 123 }})
// 接受参数
this.$route.params.userId
注意：命名路由这种方式传递的参数，如果在目标页面刷新是会出错的
2.查询参数
查询参数是在路由地址后面带上参数, 传递参数时使用query而且必须配合path来传递参数而不能用name
目标页面接收传递的参数使用query
// 发送参数
this.$router.push({ path: '/news', query: { userId: 123 }})
// 接受参数
this.$route.query.userId
注意：和name配对的是params，和path配对的是query
2.声明式导航
①字符串
<router-link to="news"></router-link>
②命名路由
<router-link :to="{ name: 'news', params: { userId: 1111}}"></router-link>
③查询参数
<router-link :to="{ path: '/news', query: { userId: 1111}}"></router-link>

Vue路由总结:
路由传递参数和传统传递参数是一样的，命名路由类似表单提交, 查询就是url传递

      1.命名路由搭配params，刷新页面参数会丢失
      2.查询参数搭配query，刷新页面数据不会丢失
      3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值