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中：

<router-link to="/hello/router1">二级路由1</router-link>
<router-link to="/hello/router2">二级路由2</router-link>
<div>
  <router-view></router-view>
</div>

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

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

1.一级路由中：

<template>
    <div>
       <div>商品列表页</div>
       <router-link to="/detail">商品详情页</router-link>
        <button @click="toDetail">商品详情页-按钮</button>  

    </div>
</template>

<script>
    export default {
      name: "GoodList",
      methods:{
          toDetail(){
            // this.$router.push('/detail')
            this.$router.push({path:'/detail',query:{goodsId:'111'}})  //带参数
          }
      }
    }
</script>

2.二级路由中：

<template>
    <div>
      商品详情页{{$route.query.goodsId}}  //获取参数 --刷新页面，参数还在
      <button @click="goBack">返回列表页</button>

    </div>
</template>

<script>
    export default {
        name: "GoodDetail",
        methods:{
          goBack(){
            this.$router.go(-1)  //返回上一页
          }
        }
    }
</script>

三、命名式路由

1.一级路由中：

<router-link :to="{name:'GoodDetail',params:{goodsid:'123'}}">商品详情页-命名</router-link>

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

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

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

2.二级路由中可通过

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