纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用

vue3.0 CLI 真小白一步一步入手全教程系列：https://www.cnblogs.com/ndos/category/1295752.html

尽可能把纷繁的知识，肢解重组成为能够堆砌的知识。

学会工具并不难，思考如何运用这些工具，才是编程或者工做中最难的部分。

个人 github 地址 - vue3.0Study - 阶段学习成果都会创建分支。

==========================

动态路由

在路由某部分里加入[ : ]，就成为动态路由如：/user/:id/，那么路由导航，并非  /user/id/ 而是 /user/666/。

显然这个 id 能被获取，在组件中使用。经过 this.$route.params 获取。 this 是当前组件，$route 是路由对象，params 是一个对象字面量 { id:666 }。

$route 经过 Vue.use(Router) 和 new Vue({ router, store, render: h => h(App) }).$mount('#app') 全局依赖注入，在全部组件中均可以使用它。

一、router.js 中 path: '/about' 路由 改成 path: '/about/:id'。

二、About.vue 中 <top-nav title="军事" :class="{ active: isActive }"/> 添加红色部分。

三、About.vue 中 data 或者 computed 属性中添加 isActive: function () { return this.$route.params.id === "666"; }

四、App.vue 中 <router-link to="/about/666">VUE</router-link>

五、About.vue 中 <style lang="less"> .active { background: red; } </style>

保存点击【VUE】导航按钮，便可见到效果：

如何取得 $route 中参数的值，即是很大的进步。这个参数能够用在任何地方，能够用来作任何事情。

好比传递数据，根据路由参数动态从服务器获取组件内容等

在进行下一个内容学习以前，commit 一下。

嵌套路由(子路由) 

在页面，一般存在多级导航。vue 官方网站即是多级导航的例子：顶部为一级导航栏，左侧为二级导航栏。

导航一般对应 <router-link> 而 <router-link> 与 <router-view/> 对应。

并不是只有 App.vue 中才能存在 <router-view/>， 任何组件均可以。

下面把 HelloWorld.vue 变为 About.vue 的子路由：

一、<HelloWorld msg="vue 官方相关资料的连接"/> 替换为  <router-view/>

二、router.js 中关于 About.vue 组件的路由 替换为

    {
      path: '/about/:id',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      children: [
        {
          path: '1',
          component: HelloWorld,
          props: (router) => ({
            msg: router.query.msg
          })
        }
      ]
    }

在浏览器地址栏输入 http://localhost:8081/#/about/666/1?msg='welcome to nDos blog' 查看效果。

编程式导航与路由命名

在 vue 初始化的工程中，路由配置时，组件都已作好命名。这即是路由命名。

编程式导航，尽可能使用命名的路由，以下：

router.push({ name: 'about', params: { userId: 123 }})

由于使用 path 属性进行编程式导航，params 无效。

这样使用路由跳转，使得单页面编程的路由跳转更加灵活。好比某个跳转按钮，能够绑定函数，进行条件跳转。

关于这两个的内容并很少，参照官网教程学习。

命名视图

在一个组件中，若是有多个组件出口，好比：在某个页面，须要同时展现不少个组件时。

只有一个 <router-view/> 显然不能知足需求。

多个 <router-view/> 同时存在的时候，就必需要加以区分，用的是 name 属性：<router-view name="a"/>

在 router.js 中的 components 属性中，添加多个组件便可 ( 到这里才明白为何 components 为何是复数形式的写法  )。

路由参数

在介绍动态路由的时候，已经看到路由参数的应用，这个东西也不复杂，参照官方教程学习。

==========================

关于路由的初级知识到这里介绍完。

下面会开始学习工做中经常使用的路由知识。