动态路由

何为动态路由：

动态路由就是带参数的路径，也就是不固定的路径
eg: localhost:8080/user/123, 其中123就是参数
动态路由用到的知识点

1：<router-view></router-view>  //作用：挂载组件

2：<router-link :to='{name:'名字',params:{id:xx}}'></router-link> //作用 组件间跳转所用，相
当于标签a,   to参数参照后面代码。

当然也可以这样写  <router-link  to='/user/xxx'></router-link>

3：$route.params.id  //读取参数值得方法。

代码：

该文件为router/index.js

import Router from 'vue-router'    
import goods from './../views/goods.vue';    //首先导入需要挂载的组件
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/user/:id',    //定义访问该组件的路径 ，:id就是动态路由的格式
      name: 'goods',   //随意命名，要和to参数对应
      component: goods    //绑定需要挂载的组件
    },
  ]
})

需要挂载的页面 app.vue

<template>
<div id=“app”>
<router-view></router-view>  
 <router-link :to="{name:'goods',params:{id:1}}">tiaoba</router-link>    //与index.js中配置的参数相对应。
 {{$route.params.id}}  //这里将输出1
 </div>
</template>

这里假设app.vue所处路径就是localhost:8080,当加载该页面后，goods组件并不会加载，原因就是我们设置了goods组件所对应的路径，在浏览器路径栏随意输入localhost:8080/user/xxx即可显示，当然点击’tiaoba’也是OK的