精华内容
下载资源
问答
  • Vue 动态路由传值

    2018-06-19 17:29:00
    动态路由传值 1.配置动态路由; const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. <router-link :to="'/Shopcontent/'+key"> {{key}}--{{item}} ...

    一.动态路由传值

    1.配置动态路由;

    const routes = [
    //动态路由路径参数以:开头
    { path: '/Content/:aid', component:Content},
    ]
    2.
    <router-link :to="'/Shopcontent/'+key">
    {{key}}--{{item}}
    </router-link>
    直接在路径后来设置要传的值

    3..在对应的页面通过

    this.$route.paramshu获取动态路由的值;
    --------------------------------------------------------------------------------------------------------------
    二.get传值
    1.配置路由
    const routes = [
    { path: '/Content', component:Content},
    ]
    2.
    <router-link :to="'/Shopcontent?aid='+key">
    {{key}}--{{item}}
    </router-link>
    在<ruter-link>中通过?来传值

    3.在对应的页面通过

    this.$route.paramshu获取动由的值;

    转载于:https://www.cnblogs.com/changedman/p/9199623.html

    展开全文
  • 内容:动态路由传值和get传值 一、动态路由传值 (1)新建并引入组件:新建需要动态路由传值得组件,并再main.js中引入 import News from './components/News.vue' import content from './components/content.vue' ...

    内容:动态路由传值和get传值
    一、动态路由传值
    (1)新建并引入组件:新建需要动态路由传值得组件,并再main.js中引入

    import News from './components/News.vue'
    import content from './components/content.vue'
    

    (2)在路由静态变量中添加跳转路径以及对应得组件名称,添加格式为

     {path:'/content/:aid',component:content},aid是动态参数,动态路径参数以冒号开头
    
    const routes=[
      {path:'/home',component:Home},
      {path:'/news',component:News},
      {path:'/content/:aid',component:content}
    ]
    

    (3)在组件中进行定义,这里我们是在news组件中点击,然后动态获取路由

      <div>我是新闻组件
          <ul>
            <li v-for='(item,key) in list'>
                <router-link :to="'/content/'+key">{{key}}--{{item}}</router-link>
    
                </li>
         </ul>
        </div>
    

    (4)在content组件中进行获取动态路由传值,在生命周期函数中获取动态路由传值得格式为this.$route.params;

    mounted(){
          console.log(this.$route.params) //获取动态路由传值
        }
    

    二、get传值方式传值

    (1)新建并引入组件:新建需要动态路由传值得组件,并再main.js中引入

    import Home from './components/Home.vue'
    import shopcontent from './components/shopcontent.vue'
    

    (2)在路由静态变量中添加跳转路径以及对应得组件名称,添加格式为
    get传值得时候定义路径正常定义不需要像动态路由一样设置参数

    {path:'/home',component:Home},
    {path:'/shopcontent',component:shopcontent}
    

    (3)在组件中进行定义
    get传值需要在调用组件中得调用路径中加上问号,问号后添加参数

    <div>我是HOME组件
            <ul>
                <li v-for="(item,key) in list">
                    <router-link :to="'/shopcontent?aid='+key" >{{item}}</router-link>
                </li>
            </ul>
        </div>
    

    (4)在shopcontent组件中进行获取路由传值,在生命周期函数中获取动态路由传值得格式为this.$route.query;

    展开全文
  • Vue动态路由:在一个页面获取上一个页面的传值 1:配置动态路由步骤: const routes = [ //(main.js文件中) { path: '/Content/:aid', component: Content }//动态路径参数以冒号开头 ] 在上一个页面中...

    Vue动态路由:在一个页面获取上一个页面的传值

    1:配置动态路由步骤:

    const routes = [

    //(main.js文件中)

                  { path: '/Content/:aid', component: Content }//动态路径参数以冒号开头

                ]

    在上一个页面中配置<router-link :to="'/Content/'+key">{{key}}---{{item}}</router-link>

    2:在对应的页面

    this.$route.params获取动态路由的值

    代码示例:

    //main.js
    import Vue from 'vue'
    import App from './App.vue'
    import VueResource from 'vue-resource'
    import VueRouter from 'vue-router'
    import Home from './components/Home'
    import News from './components/News'
    import Content from './components/Content'
    import Product from './components/Product'
    
    /*定义路由 */
    const routes = [
                    { path: '/', component: Home },
                    { path: '/Home', component: Home },
                    { path: '/News', component: News },
                    { path: '/Product', component: Product },//get传值
                    { path: '/Content/:aid', component: Content }//动态路由
                   
                  ]
      // 实例化路由
      const router = new VueRouter({
        routes // (缩写)相当于 routes: routes
      })
    Vue.use(VueRouter)
    Vue.use(VueResource)
    
    new Vue({
      el: '#app',
      // 将路由实例挂载到vue实例上
      router,
      render: h => h(App)
    })

    传值页面:

    <template>
        <div>
            <h1>这是新闻组件</h1>
           <ul>
               <li v-for="(item,key) in list" :key="key">
                        //:to="''+key"标识动态绑定key的值
                   <router-link :to="'/Content/'+key">{{key}}---{{item}}</router-link>
               </li>
           </ul>
        </div>
    </template>
    <script>
    
    export default {
        data(){
           return{
                aaa:'m,sh',
                list:['你好','这是新文艺','这是新思想']
           }
        }
      
    }
    </script>
    
    <style lang="scss" scoped>
    h1{
        color: skyblue;
    }
    </style>

    获取值的页面:

    <template>
        <div id="content">
            <h1>我是详情页面</h1>
    
        </div>
    </template>
    <script>
    export default {
        data(){
            return{
                
            }
        },
        mounted(){
            console.log(this.$route.params)/* 获取动态路由传值 */
        }
    }
    </script>
    <style lang="scss" scoped>
    
    </style>

    Get传值:

    //传值页面
    <template>
        <div>
            <br>
            <h2>这是一个首页组件</h2>
            <hr>
            <ul>
                <li v-for="(item,key) in list" :key="key">
                    <router-link :to="'/Product/?id='+key">{{key}}---{{item}}</router-link>
    
                </li>
            </ul>
    
    
        </div>
    </template>
    <script>
    import Bus from '../model/bus'
    export default {
        data(){
            return{
                msg:'Yes, a first Page!',
                title:'我是的数据NO.1',
                list:['商品已','商品丁','商品家']
            }
        }
    }
    </script>
    <style lang="scss" scoped>
    h2{
        color: red;
    }
    </style>

    获取值的页面:

    <template>
        <div id="product">
            <h1>商品详情</h1>
            
        </div>
    </template>
    <script>
    export default {
        data(){
            return{
    
            }
        },
        mounted(){
            /* this.$route.query用于获取get传值 */
            console.log(this.$route.query)
        }
    }
    </script>

    main.js页面:

    /*定义路由 */
    const routes = [
                    { path: '/', component: Home },
                    { path: '/Home', component: Home },
                    { path: '/News', component: News },
                    { path: '/Product', component: Product },//get传值
                    { path: '/Content/:aid', component: Content }//动态路由
                   
                  ]

     

    展开全文
  • 1.动态路由传值  1.配置路由处  { path: '/content/:id', component: Content }, // 动态路由    2.对应页面传值  <router-link :to="/content/+item">{{item}}</router-link>  3.对应...

     

    1.动态路由传值

      1.配置路由处

      { path: '/content/:id', component: Content }, // 动态路由
      
      2.对应页面传值
      <router-link :to="/content/+item">{{item}}</router-link>
     
      3.对应页面接值
      this.$route.params.id;

    main.js

    home

    content

     

    2.get传值方法

    无需配置路由

    { path: '/content/:id', component: Content }, // 动态路由
      
      1.对应页面传值
      <router-link :to="'/content?id='+item">{{item}}</router-link>
     
      2.对应页面接值
      this.$route.query.id;
     
     
     
    3.编程式导航  就是不用链接跳,用js代码跳

    // 字符串
    this.$router.push('home')

    // 对象
    this.$router.push({ path: 'home' })

    // 命名的路由
    this.$router.push({ name: 'user', params: { userId: '123' }})

    // 带查询参数,变成 /register?plan=private
    this.$router.push({ path: 'register', query: { plan: 'private' }})

     

    转载于:https://www.cnblogs.com/v616/p/11263968.html

    展开全文
  • 方式一:动态路由传值 1、定义路由规则 import Newcontent from './components/NewContent.vue'; //2、配置路由 const routes = [ { path: '/new', component: News }, { path: '/blog', component: Blog ...
  • vue动态路由传值

    2020-03-21 14:31:26
    方式一 <router-link to="/class/classInfo...在路由配置的时候设置路由参数 {{$route.params.id}}以这种方式在页面中获取参数 方式二 <router-link :to="{name:'classInfo',params:{classInfo:'classInfo'}}"...
  • 上一篇我们讲解了vue中的路由以及默认路由跳转,本篇我们来继续学习如何通过类似Get请求传值的方式,给路由传递参数。 本系列博文使用的Vue版本:2.6.11 一、动态传参的概念 上一篇我们实现了分别点击“首页”和...
  • vue 路由组件传值

    2019-03-18 14:59:08
    地址:... 1、不同路由传值:动态路由传值 A.配置动态路由 routes: [ { path: '/user/:id', component: User } ] B.在对应的页面通过以下方式获取值 console.log(this.$route.pa...
  • 1.动态路由传值 在我这个项目里要实现的是从 News.vue 跳转到Content.vue News.vue &lt;template&gt; &lt;!-- 所有的内容要被根节点包含起来--&gt; &lt;div id="news"&gt; 我...
  • vue 动态路由 Get传值

    2019-09-22 10:11:37
    配置路由 注意:名字 2 3 const routes = [ 4 { path: '/home', component: Home }, 5 { path: '/news', component: News }, 6 7 { path: '/content/:aid', component: Content...
  • Vue动态路由 Get传值

    2019-06-20 13:44:00
    < template > <!-- 所有的内容要被根节点包含起来 --> < div id ="home" ...获取动态路由传值 */ } } script >   转载于:https://www.cnblogs.com/loaderman/p/11058278.html
  • 方式一 127.0.0.1:8080/forRoute/4534 <router-link to="/forRoute/...在路由配置的时候设置路由参数 {{$route.params.testId}}以这种方式在页面中获取参数 方式二 <router-link :to="{name:'route1',params...
  • Vue动态路由以及Get传值1.不同路由传值:动态路由1.配置动态路由2.获取动态路由的值3.实例2.Get方法传值 1.不同路由传值:动态路由 1.配置动态路由 routes:[ //动态路径参数 以冒号开头 { path: '/user/:id', ...
  • vue路由传值

    2018-09-26 13:02:42
    (1)不同路由传值动态路由 1.动态路由配置: routes: [{ path: '/user:id', component:user } ] 2.当传值的时候可以在&lt;router-link :to="'./user'+参数"&gt;&lt;/router-link&...
  • vue中的路由传值 动态路由 1、在定义路由的时候通过/:属性的方式来定义传递参数的属性 2、在进行路由跳转的时候通过/值得方式进行传递数据 3、在需要接收参数的组件中通过this.$route.params进行接收 ...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 148
精华内容 59
关键字:

vue动态路由传值

vue 订阅