vue学习之vue-router

        今天分享一个十分重要的前端技术，vue-router，路由。在所有的vue项目中都需要使用到的技术，你说重不重要。

1.vueRouter的理解

一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。

vueRouter是vue 的一个插件库，专门用来实现 SPA 应用

SPA单页面应用参考：单页面应用（SPA） - 一只菜鸟攻城狮啊 - 博客园

2.路由的安装

如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由（详细见vue-cli 脚手架），如果选择y，后面下载依赖会自动下载vue-router。
这里还是说一下安装：在终端或者cmd中输入npm install vue-router命令

3.配置vueRouter

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，用vue-cli生产了我们的项目结构，src文件目录下会有一个router文件夹，此处就是编写路由组件的地方。在src/router/index.js，这个文件就是路由的核心文件：

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
 
Vue.use(Router)  //Vue全局使用Router
 
export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }，
    {
      path:'/hi',
      component:Hi,
    }
  ]
})

4.路由的使用

（1）在组件中使用router-link标签，router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。

<router-link to="/">[text]</router-link>

        to：导航要去跳转的路径，要填写的是你在router/index.js文件里配置的path值，跳转到哪里就使用哪个

        [text] ：就是我们要显示给用户的导航名称

（2）使用router-view标签用来显示匹配到的组件需要在什么位置展示就写在什么位置

5.动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件，例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数来达到这个效果：

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

比如说，现在有‘张三’和‘李四’都需要映射到这个路由上，一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用，组件内使用this.$route.params.id来获取动态路由，所以我们就可以在user组件中展示对应的是张三还是李四

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

6.编程式导航

1.router.push( )
想要导航到不同的 URL，则使用 router.push (在创建vue实例并挂载后调用)。router.push方法就是用来动态导航到不同的链接的，这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

声明式	编程式
<router-link :to="...">	router.push(...)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

2.router.replace( )
router.replace跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

3.router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

 7.重定向

重定向也是通过 routes 配置来完成，是从一个路径重定向为另一个路径，比如说，

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

这里就是说如果你跳转的路径是a，会定向到b，这就是重定向

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

8.路由组件传参 

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。所以路由组件传参就是为了解决$route的耦合

通过 props 解耦

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

路由传参有三种方式，分别是布尔值，对象，函数

1.布尔模式
如果 props 被设置为 true，route.params 将会被设置为组件属性。

2.对象模式

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

const router = new VueRouter({
  routes: [
    {
      path: '/promotion/from-newsletter',
      component: Promotion,
      props: { newsletterPopup: false }
    }
  ]
})

3.函数模式

你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

const router = new VueRouter({
  routes: [
    {
      path: '/search',
      component: SearchUser,
      props: route => ({ query: route.query.q })
    }
  ]
})

路由总结暂时先告一段落，若有补充会及时更新，写的不好敬请谅解