Vue 编程式导航以及参数传值1

main.js

 

tip:路由使用中，可以使用path，或者name

  {path:'/testmargin',name:'tm',component:testmargin, alias: '/bbbb'},//别名

 this.$router.push({

                  name:'tm',query:{name:'777'}

                });

console.log(this.$route.query.name);

 

 

 

 

//2.配置路由

第一种方法

const routes=[

  {path:'/testmargin/:aid',component:testmargin, alias: '/bbbb'},//别名

  {path:'/NonePCComp',component:NonePCComp},

  {path:'/testecharts',component:testecharts},

  {path:'/tttttttt',redirect:'/testmargin'},

  {path:'*',redirect:'/testecharts'}

]

第二种方法

//2.配置路由

const routes=[

  {path:'/testmargin',component:testmargin, alias: '/bbbb'},//别名

  {path:'/NonePCComp',component:NonePCComp},

  {path:'/testecharts',component:testecharts},

  {path:'/tttttttt',redirect:'/testmargin'},

  {path:'*',redirect:'/testecharts'}

]

Vue页面

<button @click="goNews">通过js跳转到新闻页面</button>

 

goNews:function(){

                // 注意：官方文档写错了

                //第一种跳转方式

                // this.$router.push({ path: 'NonePCComp' })

 

                 //this.$router.push({ path: '/testmargin/495' });   //在对应页面取值console.log(this.$route.params.aid);

                 //第二种

                 this.$router.push(

                   {

                     path:'/testmargin',query:{name:'666'}

                   }

                 );//在对应页面取值console.log(this.$route.query.name);

            }

 

 

注意，第二种传值的时候，数组名称一定要是query，不然抓不到

 

其次 通过URL传值

<router-link :to="'/pcontent?id='+key"></router-link>

//获取get传值

              console.log(this.$route.query);