vue-router模式，嵌套路由、编程式路由、命名路由

一、vue-router共两种模式：hash模式（默认）、history模式

模式可通过router文件夹中的index.js文件进行设置：

export default new Router({
mode:'history',//'hash'或'history'
  routes: [
    {
      path: '/user/:username',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

hash模式：url地址中带有#

history模式：url地址中无#，比较美观

二、嵌套路由

1.在router文件中设置：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import router1 from '@/view/router1'  //1.引入
import router2 from '@/view/router2'


Vue.use(Router)

export default new Router({
mode:'history',
  routes: [
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld,
      children:[    //2.二级路由
        {
          path:'router1',  //注意：子路由中的path路径必须是相对路径，不带/
          name:'router1',
          component:router1
        },{
          path:'router2',
          name:'router2',
          component:router2
        }
      ]
    }
  ]
})

2.一级路由helloword中：

二级路由1
二级路由2

  

注意：to中的路径必须是绝对路径

三、编程式路由--通过js进行跳转

1.一级路由中：

2.二级路由中：

三、命名式路由

1.一级路由中：

商品详情页-命名

name：要跳转的页面在路由文件中设置的name值

params:传递的参数 ---刷新页面参数消失

注意：其中to必须通过v-bind绑定；name 的参数必须和路由中设置的name值相同

2.二级路由中可通过

{{$route.params.goodsid}}获取参数