3.动态路由vue-router

前言： 今天我来给大家介绍一下v-router，这是个什么东西？我们先从动态路由讲起。

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

1、动态路由有一个什么适用场景呢？

比如在写商品详情页面的时候，页面结构都一样，只是商品id的不同，所以这个时候就可以用动态路由动态。

2、官方文档

首先我们来看看官方文档上是怎么解释动态路由的？（https://router.vuejs.org/zh-cn/）

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到$route.params中。例如：

3、动手试一试

看不懂？有点迷糊？没关系，我们亲自上手试一试，实践出真理嘛。

① 首先我们动手试一下上面表格中第一个模式的实现，我们新建一个文件夹并命名为view，然后在文件夹下新建test.vue

② 到router文件夹下 》index.js文件 》打开并输入

代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//引入组件
import Test from "@/view/test"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/test/:testId',
      name: 'Test',
      //填写路由参数
      component: Test,
    }
  ]
})

③ 再到test.vue组件中敲：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//引入组件
import Test from "@/view/test"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/test/:testId',
      name: 'HelloWorld',
      //填写路由参数
      component: Test,
    }
  ]
})

在这里需要说明一下$route.params.testId是什么意思了，大概你也猜得出来，就是获取当前路由的参数。

④ 现在输入localhost:8080/#/test/这里随便带个什么参数”就可以就可以看到：

以上这就是动态路由的第一个模式了。

如果第一个模式你能看懂，那么表格中的第二个模式也就不在话下，我就不做标注解释了，同理；有疑问留言。
上图：

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//引入组件
import Test from "@/view/test"

Vue.use(Router)

export default new Router({
  routes: [
    {
      // path: '/test/:testId',
      path:'/test/:testId/name/:testName',
      name: 'HelloWorld',
      //填写路由参数
      component: Test,
    }
  ]
})

test.vue

<template>
    <div class="test">
          this is id:{{$route.params.testId}}
      <br/>
          this is name:{{$route.params.testName}}
    </div>
</template>

<script>
    export default {
      name:'Test',
      data() {
        return {
          msg: 'hello vue'
        }
      }

    }
</script>

<style scoped>

</style>