vue-router -- 动态路由匹配

一、概述

• 使用场景：
  
  • 根据商品的id返回指定商品的详情页
• 匹配规则

模式	匹配路径	$route.params
/user/:username	/user/Jack	{username=’Jack’}
/user/:username/post/:post_id	/user/Jack/post/123	{username=’Jack’,post_id=’123’}

二、代码展示

• 目录结构

注意：components里面一般存放用于复用的组建
自己编写的页面应该新进一个文件夹存放

• goods.vue

<template>
    <div>商品列表
        <span>
            {{ $route.params.goods_id}}
        </span>
    </div>
</template>

• index.js

import Vue from 'vue'
import Router from 'vue-router'
import Goodlists from '@/Goodlists/goods'

Vue.use(Router)

export default new Router({
    mode:"history",
  routes: [
    {
      path: '/goods/:goods_id',
      name: 'Goodlists',
      component: Goodlists
    }
  ]
})

• mode为hash
  
• mode为history

• 两种方式的区别就在于#，这儿访问路径必须严格。