vue全家桶中的路由

一 动态路由的示例：

1. index.js中的文件代码
   import Vue from ‘vue’
   import Router from ‘vue-router’
   import GoodsList from ‘@/views/GoodsList’
   Vue.use(Router)
   export default new Router({
   mode:‘history’,
   routes: [
   {
   // 冒号后面的是要用实际输入的数据代替掉的
   path: ‘/goods/:goodsId/user/:name’,
   name: ‘GoodsList’,
   component: GoodsList,
   }
   ]
   })

2.GoodsList.vue中的代码

结果：

二 嵌套路由的示例：

3. index.js中的文件代码

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
Vue.use(Router)
export default new Router({
  mode:'history',
  routes: [
    {
      path: '/goods',
      name: 'GoodsList',
      component: GoodsList,
      《子路由一般是数组，并且前面不能带/,访问的时候输入/goods/title》
      children:[{
      	path:'title',
      	name:'title',
      	component:Title
      },
      {
      	path:'img',
      	name:'img',
      	component:Image
      }]
    }
  ]
})

4. GoodsList.vue中的代码(父路由)

<template>
	<div>
		这是商品列表
		<span>{{$route.params.goodsId}}</span>
		<span>{{$route.params.name}}</span>
		<!-- 2个子路由的跳转位置 -->
		<router-link to='/goods/title'>显示商品标题</router-link>
		<router-link to='/goods/img'>显示商品图片</router-link>
		<div>
			<!-- 子路由要在父路由里面报道 -->
			<router-view></router-view>	
		</div>
	</div>
</template>   
<script></script>
<style></style>

5. 子路由Title.vue
   

6. 子路由Image.vue
   
   代码结果示例：
   

三 编程式路由

1. index.js中的文件代码
   
2. GoodsList.vue中的代码
   
3. Cart.vue中的代码
   
   结果：
   

四 命名路由和命名视图

定义：给路由定义不同的名字根据名字进行匹配
给不同的router-view定义名字，通过名字进行对应组件的渲染
用的相对来说会比较少一些
index.js的代码


结果：