美文网首页
动态路由->路由传参->自定义链接地址->伪静态

动态路由->路由传参->自定义链接地址->伪静态

作者: coffee1949 | 来源:发表于2019-06-09 12:46 被阅读0次
    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: '/goodslist/:goodsID',         //第一步
          // path: '/goodslist/:goodsID.html',    //第二步
          path: '/goodslist-:goodsID.html',       //最终效果
          //还可以使用正则验证参数的合法性
          // path: '/goodslist/:goodsID(\\d+)',
          name: 'goodslist',
          component: GoodsList
        }
      ]
    })
    
    
    访问地址如下才可匹配:http://localhost:9000/goodslist-666999666.html
    
    <router-link :to="{name:xxx, params: {key:value}}">valueString</router-link>
    
    <h2>{{$route.params.username}}</h2>
    

    // 路由配置
     {
        path: '/detail/:id',
        name: 'Detail',
        component: Detail
    }
    
    // js跳转
    this.$router.push({
        name: 'Detail',
        params: {id: 8}
    })
    
    // 地址显示为
    http://localhost:8080/detail/8
    
    // 获取参数
    <div>
        <h1>This is an detail page</h1>
        {{$route.params.id}}   // 这是8
    </div>
    

    // 路由配置
     {
        path: '/detail-:id.html',
        name: 'Detail',
        component: Detail
    }
    
    // js跳转
    this.$router.push({
        name: 'Detail',
        params: {id: 8}
    })
    
    // 地址显示为
    http://localhost:8080/detail-8.html
    
    // 获取参数
    <div>
        <h1>This is an detail page</h1>
        {{$route.params.id}}   // 这是8
    </div>
    

    相关文章

      网友评论

          本文标题:动态路由->路由传参->自定义链接地址->伪静态

          本文链接:https://www.haomeiwen.com/subject/lqogxctx.html