Vue方向：Vue-Router路由

路由介绍

---

Vue router是 Vue.js的官方路由管理器，用于构建单页面项目，在安装Vue-cli时，选择router即可安装，期间有一个是否启用history选项，可以先选择no,也就是hash模式，可以在配置中更改成history模式，安装后，npm run serve启动项目，会发现link,单页面链接，在hash模式下，链接地址前会有#号，改成history模式则没有#号

更改模式在：src/router/index.js里，设置options:

const router = new  VueRouter({

      mode  ： 'history',        //默认mode : 'hash'

      routers

})

PS: 设置history模式，需要服务器环境配置的支持，手册已经给出各个服务的解决方案

PS：地址为：https://router.vuejs.org/zh/guide/essentials/history.mode.html

使用路由

---

安装了router路由的脚手架，多了两个目录，且配置和入口文件也发生了改变，先来分析下入口文件main.js，比之前多了引入和注册路由的内容；

引入路由

import  router  from  './router'

     new Vue({

      //注册路由

            router,

            ....

})

分析App.vue中路由的各种元素，搭配router/index.js

router-link标签

Home

About

PS:  1. 是组件导航，会被渲染成超链接标签

        2. to属性是链接地址，会被渲染成href属性

const  routers = [

           {

                path : '/',

                name: 'Home',

                component: Home

           },

          {

                path: '/about',

                name: 'About',

                component: () => import('../views/About.vue')

            }

 ]

对于的index.js部分，

//引入Vue.jsimport  Vue  from  'vue'

//引入vue-router.jsimport  VueRouter  from  'vue-router'

//引入Home组件import  Home  from  '../views/Home.vue'

参数是一个插件，路由就是一个插件

初始化这个插件以便使用

Vue.use(VueRouter)

这个常量用于设置每个组件的信息，然后交给路由插件注册

const  routers = [

               {

                       path: '/', //链接地址

                       name: 'Home', //别名

                       component: Home  //加载的组件

                }， 

               {

                       path: '/about', 

                       name: 'about', //另外一种组件加载模式，路由懒加载，

                       component: () => import('../views/About.vue')

               }

]

实例化路由组件

    const router = new VueRouter({

        mode: 'hash',  //默认mode : 'hash'

        routers

    })

 导出路由

    export  default  router

回到App.vue, 导航链接下方有一个空标签

渲染view目录下的页面组件，而components是功能性小组件

动态路由设置

---

所谓动态路由匹配：就是不确定的参数进行路由映射到同一组件上去，比如经典的：user?id: 5, 这个5就是动态的数值，最终路径：user/5

模式 匹配路径 $router.params

顺带说下vue-router传参的两种方式的区别（query和params）

       query类似get请求，页面跳转后，会在地址栏上显示请求的参数

       而 params 类似post请求，页面跳转后，地址栏上不会显示请求的参数信息

1. query传参的方式以及去接收参数

    传参：

     this.$router.push ({  

                           path: '/list',

                           query: {

                                  id: id

                            }

                      })

     接收参数：

     this.$route.query.id

2. params传参的方式以及去接收参数

     传参：

      this.$router.push({

                              name: 'list',    //params里面只能是这种格式，不能是path:'/list'这种形式，因为params只能通过name来引入路由。

                              params: {

                                       id: id

                               }

                       })

      接收参数：

      this.$router.params.id

/user/:id /user/5 { id : 5 }

/user/:id/post/:name /user/5/post/lee { id : 5, post : 'lee' }

创建user页面组件后，先采用query模式：user ? id = 5 ;

如果要使用动态路由，先需要在path里配置相关路由规则，然后再获取；

{

        path : '/user/:id',

        name: 'User',

        component : User

},

PS:  $route对象的相关属性

创建两个不同参数但同一组件调用的链接，方便来回点击调试

user/5

user/6

由于动态路由访问的都是同一组件不同参数，组件会被复用以提升效率，可以通过watch监听对象，来监听$router(to,from)判断去处和来源；

有时路由不存在会得不到任何结果，可以设置捕获所有路由或404

{

    path: '*',

    name: 'Home',

    component: Home

},

{

    path: '/user-*',

    name: 'Home',

    component: Home

}

在App.vue中，创建script，来监听动态路由的变化；

嵌套路由的使用

---

嵌套路由的三种匹配方式，第一种是固定路由，二三种是两种动态路由：

模式 匹配路径

/news/music /news/music

/user/:id/profile /user/5/profile

/user/:id/posts /user/5/posts

可以在views目录下创建user目录，并分别创建UserProfile和UserPosts:

在route/index.js配置路由规则，在User组件中配置子路由；

{

       path: '/user/:id',

       name: 'User',

       component: User,

   children : [

          {

               path : 'profile',

               component: UserProfile

          },

          {

                path :  'posts',

                component: UserPosts

          }

     ]

}

注： 组件名称和路径设置的不一样，路由采用的是路径

子路由不需要 /  ,  因为斜杠会被当成根路径

在User.vue 这个父路由，需要使用视图渲染加载子路由：

注：外层需要有一个元素标签，否则会报错

如果父路由，遇到没有可渲染的子路由，可以设置一个空路由

{

      path : '*',

      component : List

}