个人笔记

路由基础

# 路由介绍

路由多被理解为指向，我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转。

# 路由中route,routes,router的理解

route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。
routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

# 路由模板

import Vue from "vue";
import VueRouter from "vue-router";

// 引入组件
import home from "./home.vue";
import about from "./about.vue";

//  vue 使用 vueRouter
Vue.use(VueRouter);
const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    }
]
var router =  new VueRouter({
    routes
})
export default router;

# router-link 和 router-view

这两个标签都是在html模板中的
router-link 最终被渲染成 a 标签,对应点击部分,router-link还有一个非常重要的属性 to，定义点击之后，要到哪里去，最后被渲染成 href属性。
router-view 更像是一个坑位，对应显示部分,匹配上的路由在哪里展示。

# 路由重定向 redirect

首次进入页面的时候路由时 '/',展示空白页面，没有做相对配置，我们希望一进来就进入home页面

     {
            // 重定向
            path:'/',
            redirect:'/home'
     },
     {
            path:'/home',
            redirect:home
     }

# 动态路由

上面所展示的路由都是严格匹配，然而实际应用却不是这样。例如:点击每个用户,跳转到用户信息页面，每个人的信息时不同的，所以路由也是不同的，路由中需要加上用户id进行匹配

<!--html 模板-->
<template>
  <div id="app">
    <header>
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
     <!--  增加两个到user组件的导航，可以看到这里使用了不同的to属性 -->
      <router-link to="/user/123">User123</router-link>
      <router-link to="/user/456">User456</router-link>
    </header>
    <router-view></router-view>   
  </div>
</template>

// 路由
const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    },
    /*新增user路径，配置了动态的id*/
    {
        path: "/user/:id",
        component: user
    },
    {
        path: '/', 
        redirect: '/home' 
    }
]

<!--user组件-->
<template>
    <div>
        <h1>User</h1>
        <div>我是user组件</div>
    </div>
</template>
<script>
    export default {}
</script>

这时在页面中点击user123 和user456, 可以看到它们都导航到user组件，配置正确

# 动态路由的获取

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

<!--user组件改造-->
<template>
    <div>
        <h1>User</h1>
        <div>我是user组件, 动态部分是{{dynamicSegment}}</div>
    </div>
</template>
<script>
    export default {
        computed: {
          dynamicSegment () {
                return this.$route.params.id    // 获取动态路由
            }
        }
    }
</script>

TIP

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

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

# 嵌套路由

1. 在需要嵌套的组件中添加一个坑位：
1. 在该组件对应的路由配置上添加children属性，children是一个数组。
1. 最终children里的子路由都会被渲染到"坑位"中。

// 路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const route = new Router({
  routes:[
    {
      path:'/',
      name:'home',
      component:resolve => require(['@/page/home/home'],resolve),
      children:[   // 嵌套路由
        {
          path: '/vuex',
          name: 'vuex',
          component: resolve => require(['@/page/vuex/vuex'] , resolve)
        },
        {
          path:'/mobanyufa',
          name:'mobanyufa',
          component:resolve=> require(['@/page/mobanyufa/mobanyufa'] , resolve)
        },
      ]
    },
  ]
})
export default route;

# 命名路由

命名路由:很简单,因为根据名字就可以知道,这个路由有一个名字那就直接给这个路由加一个name属性，就可以了。

{
        path: "/user/:id",
        name: "user",  // 命名
        component: user
}

# 编程式导航

这主要应用到按钮点击上。当点击按钮的时候，跳转另一个组件。
调用 rourter.push()方法。当们把router 注入到根实例中后，组件中通过 this.$router 可以获取到router, 所以在组件中使用。
this.$router.push("/home"), 就可以跳转到home界面

// 按钮的点击事件
handleButtonClick() {
    this.$router.push('/home');
}

← Vuex-状态集路由传参 →