路由携带参数与获取路由中的参数

路由携带参数与获取路由中的参数

代码如下：

  // vue路由中通过router-link去做跳转，它有一个to属性，to属性的值必须和path中的路径对应
  // router-link将来会被渲染成为a标签，它的to属性会被渲染成a标签的href属性，但它的值前对面会加一个#，变为锚点 
        <li><router-link to="/index">首页</router-link></li>
        <li><router-link to="/product_type/11">蔬菜</router-link></li>
        <li><router-link to="/product_type/22">水果</router-link></li>
        <li><router-link to="/product_type/33">肉类</router-link></li>

	
	// 路由需要的组件
	 var product_type = Vue.component('index', {
        template: '<div>首页</div>'
      })

	// 创建路由对象，在这个对象里面去配置路由规则
 var router = new VueRouter({
        //  通过routes属性配置路由规则，它是一个数组，数组中放的是对象，每个对象对应一条规则，并且每个对象里面都包含有name(表示路由规则的名称)/path(表示路径)/component(表示路径对应的组件)
        routes: [
          // 路由加参数方法 :参数名
          {name: 'productType', path: '/product_type/:id', component: productType}
        ]
      })

路由加参数

routers:[ {name:'路由的名字',path:'/xxxx/:id',componment:'组件对应的路径'} ]

获取路由中的参数

this.$router.params.参数名