2021/1/22 vue路由 GET传值 结合请求数据 编程式导航与hash模式 路由嵌套

vue路由get传值

1.cmd ，npm 导入vue-router到项目中

2.配置路由

3.配置路由传值的两种方式

{ path: '/content/:aid', component: Content },
  { path: '/pcontent', component: Pcontent },

@第一种传参<router-link :to="'/pcontent?aid='+key">{{key}}----{{item}}</router-link>

@第二种传参 <router-link :to="'/content/'+item.aid">{{item.title}}</router-link></li>

 

接收参数

@第一种接收参数var aid = this.$route.params.aid

@第二种接收参数this.msg = this.$route.query.item

 

vue结合请求数据

methods: {
        requestData(){
            var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
            this.$http.jsonp(api).then((response)=>{
                console.log(response)
                this.list = response.body.result
            },(err)=>{console.log(err)})
        }
    },
    mounted() {
        this.requestData()
    },

 mounted() {
        var aid = this.$route.params.aid
        this.requestData(aid)
    },
    methods: {
        requestData(aid){
            var api = 'http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=' + aid;
            this.$http.get(api).then((response)=>{
                console.log(response)
                this.list = response.body.result[0];
            },(err)=>{console.log(err)})

        }
    },

vue编程式导航（通过Js跳转），hash模式ulr

goNews(){
            // this.$router.push({path: '/news'}) // 跳转到指定路径
            // this.$router.push({path: '/content/499'}) //跳转传参
            this.$router.push({name:'news'}) //跳转到别名
        }

配置url模式

在实例化VueRouter时

const router = new VueRouter({
  mode: 'history', //改变Url模式
  routes // （缩写）相当于 routes: routes
})

路由嵌套

1.挂载页面

2.配置子路由

{
     path: '/user', component: User ,
     children:[
       { path:'useradd', component: UserAdd},
       { path:'userlist', component: UserList},
     ]
  },

3.配置HTML页面和跳转

<template>
    <div id="user">
        <div class="user">
            
            <div class="left">
                <ul>
                    <li>
                        <router-link to="/user/useradd">增加用户</router-link> // 跳转链接
                    </li>

                    <li>
                        <router-link to="/user/userlist">用户列表</router-link> //跳转链接
                    </li>
                </ul>



            </div>

            <div class="right">
               <router-view></router-view> //显示区域




            </div>



        </div>

        
    </div>
</template>

 

<style lang="scss" scoped>
    .user{
            display: flex;

        .left{
            width: 200px;
            min-height:400px;


            border-right: 1px solid #eee;

            li{
                line-height: 2;
            }
        }
        .right{
            flex:1;

        }
    }
</style>