vue-router 的使用及参数传递

vue-router 路由器的使用

一、router 全局配置

1. 安装路由

    npm install vue-router
   

2. 创建路由器
   通常使用 vue-cli 创建的项目，如果开始没有导入 router 的话，需要我们自己手动创建，这个时候，我们在src 目录下创建 router 目录，在目录下创建 index.js，内容如下：

   /**
   * 路由器对象模块
   */
   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   // 声明使用vue-router插件
   /**
   *  内部定义并注册了2个组件标签(router-link/router-view),
   *  给组件对象添加了2个属性:
   *  1. $router: 路由器,可以使用 this.$router 访问路由器
   *  2. $route: 当前路由，可以使用 this.$route 访问当前路由
   */
   Vue.use(VueRouter)
   
   export default new VueRouter ({
    // 注册应用中所有的路由
    routes: [
    ]
   })
   

   然后在入口文件 main.js 中加入配置：

   /**
    * 入口JS
    */
   import Vue from 'vue'
   import App from './App.vue'
   import router from './router'
   
   
   new Vue({
     el: '#app',
     components: {App}, // 映射组件标签
     template: '<App/>', // 指定需要渲染到页面的模板
     router  // 注册路由器，这里的名字是固定的，如果 import 引入的为其他名字(myRouter)，这里需要进行映射，比如 router: myRouter
   })
   

   至此，全局配置完成，下面来进行基础路由的配置。

二、基础路由

编写路由的三大步：

1. 定义路由组件
2. 路由映射
3. 编写路由两个标签

   <router-link to=""></router-link>
   <router-view></router-view>
   

在 router/index.js文件中定义我们自己的路由，内容如下：

/**
 * 路由器对象模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../views/Home.vue'

// 声明使用vue-router插件
Vue.use(VueRouter)

export default new VueRouter ({
  // 注册应用中所有的路由
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    }
  ]
})

定义好路由之后，在 Home.vue 中使用路由：

<template>
  <div>
    <h2>Home</h2>
    <div>
      <ul class="nav nav-tabs">
        <li><router-link to="/home/news">News</router-link></li>
        <li><router-link to="/home/message">Message</router-link></li>
      </ul>
	  <!-- 用来显示内容的区域 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {}
</script>

<style>

</style>

三、嵌套路由 – children

下面来看一下嵌套路由，即组件内部还有子路由。
注意 path 最左侧的 “/” 永远代表根路径，仔细看下面的子路由写法：

/**
 * 路由器对象模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import MessageDetail from '../pages/MessageDetail.vue'

// 声明使用vue-router插件
Vue.use(VueRouter)

export default new VueRouter ({
  // 注册应用中所有的路由
  routes: [
    {
      path: '/',
      redirect: '/about'
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: '/home/news',
          component: News
        },
        {
          path: 'message',
          component: Message,
          children: [
            {
              path:'detail/:id',
              component: MessageDetail
            }
          ]
        },
        {
          path: '',
          redirect: '/home/news'
        }
      ]
    }
  ]
})

在上面的基础路由html代码片段中，已经写出对应的子路由跳转。

四、路由组件传递数据 – $route

在路由跳转的同时，需要给对应的路由中加入参数，此时我们可以这么写：

1. 定义路由的时候，使用params占位符：

   path: '/home/news/detail/:id',
   component: NewsDetail
   

   然后在使用标签的时候，传递对应的参数：

   <router-link :to="'/home/news/detail/${news.id}'"></router-link>
   

   可以通过$route.params.id进行参数获取，具体可以获取到什么参数，可以通过浏览器的 vue 工具进行查看。

2. 使用 $route.query来传递参数
   和 param 差不多，只是不需要在 path 上面进行占位，另外在 router-link 中，应该是这么写：

   <router-link :to="'/home/news/detail?id=${news.id}'"></router-link>
   

3. 使用router-view 进行传递

   <router-view :msg="id"></router-view>
   

   在子组件中声明 props 进行接收：

   prop: {
    msg: Srting
   }
   

五、缓存路由组件 – keep-alive

路由跳转的时候，保存当前路由的数据状态，返回当前路由时，状态仍然存在。

<keep-alive>
  <router-view></router-view>
</keep-alive>

六、路由编程导航 – $router

路由的编程式导航    

this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$Router.push({name:'xxx',params: {xx:xx,aa:bb}}) 路由传参
this.$Route.query  获取路由传过来的参数