首先编好组件

GoodsList.vue

,然后在ruoter/index.js里引入

import GoodsList from './../views/GoodsList'以及在routes里声明这个组件

export default new Router({
  routes: [
    {
      path: '/',
      name: 'GoodsList',
      component: GoodsList
    }
  ]
})

 

 

动态路由匹配

动态的加载路由,像商品详情页面,页面元素都一样,只是根据不同的id渲染不同的内容.这就需要动态加载路由

在路由页面动态加载商品id

export default new Router({
  routes: [
    {
      path: '/goods:goodsId',
      name: 'GoodsList',
      component: GoodsList
    }
  ]
})

然后把商标列表页的id动态渲染

<span>{{$route.params.goodsId}}</span>

 

如果传递2个参数:

path: '/goods/:goodsId/user/:name',

<span>{{$route.params.name}}</span>

history.pushState["desc","test","/admin"]参数的含义页面的描述,页面的标题,页面的地址

 

嵌套路由

就是在一个页面里点击一个链接跳转到另一个页面.

首先编好子页面,在index,js里引入,路由

import Image from '@/views/Image'
import Title from '@/views/Title'

因为是子组件,所以要用children来定义路由:

routes: [
  {
    // path: '/goods/:goodsId/user/:name',
    path: '/goods',
    name: 'GoodsList',
    component: GoodsList,
    children:[
      {
        path:'image',
        name:'Image',
        component:Image,
      },{
        path:'title',
        name:'Title',
        component:Title,
      }
    ]

在主页面里,用router-link 来跳转页面,

并用div 包含router-view来加载子页面

 <router-link to="/goods/title">显示图片标题</router-link>
 <router-link to="/goods/image">显示图片</router-link>
<div>
   <router-view></router-view>
</div>

/goods/title"这是绝地路径