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

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