vue之vue-roter

Posted 2020-10-30 mj-my

路由
1.子路由：想要子路由的内容完全显示出来，那么就创建一个空路由，存放router-view，用来显示子理由的。

    {
            path:‘/news‘,  //新闻页面
            component:NewsN2,    //用一个空的路由模板代替。提供<router-viwe>的渲染视图。
            name:‘NewsN2‘,
            children:[
                {
                    path:‘/‘, 、、默认的就是新闻页面
                    component:News,
                    name:‘News‘
                },
                {
                    path:‘n1‘,   //这个就顺其自然的就是新闻页的子页面了。也是提供<router-viwe>的渲染视图。
                    component:nn,
                    name:‘nn‘,
                    children:[
                        {
                            path:"/",  //这个才是真的的子页面，因为nn也是代替NewsN1这个模板的。
                            component:NewsN1,
                            name:"NewsN1",
                        },
                        {
                            path:"newsS", //这个自然就是NewsN1的子页面，也就是新闻的孙子页面。
                            component:newsS,
                            name:"newsS",
                        }
                    ]
                },
                
            ]
        },

 

2.路由传参(name和params配合)：
    路由传参目前有两种方式。
    1.通过配置路由中的name值传参。
    2.通过绑定router-link :to="{name:"唯一的name值",params:{键:值}}",
    3.由于第二步的作用，那么也可以通过props方法，父组件传值给子组件接收，同样也可以通过vuex方式传。
    

    1.路由name传参。
 

  路由文件：
    routes:[
        {path:‘/‘,component:index,name:‘index‘},
        {path:‘/news‘,component:news,name:‘news‘}
    ];
    html:
    <div>{{$route.name}}</div> //index页面：显index的值,news页面：显news的值,

 

    2.绑定router-link。它是通过拿到唯一的name值去绑定。
  

 路由文件：
    routes:[
        {path:‘/‘,component:index,name:‘index‘},
        {path:‘/news‘,component:news,name:‘news‘}
    ];
    html:header页面。
    (固定传值)
    <div><router-link :to="{name:"news",params:{id:123}}"></div> //这个是当跳转到news页面会显示123。
    (动态传值)
    <div><router-link :to="{name:"news",params:{id:this.data,idg:this,res}}"></div> //这个是当跳转到news页面会显示123。
    
    <script>
        export default{
            name:"header",
            data:function(){
                return:{
                    data:"你好",
                    res:"朋友"
                }
            }
        }
    </script>
    
    html:news页面。
    (固定值)
    <div>{{$route.params.id}}</div> //显示：123，
    (动态值)
    <div>{{$route.params.id}}{{$route.params.idg}}</div> //显示：你好朋友。

 

3.路由传参(path和query配合).

  

 //header.html
    路由通过绑定to，路径来跳转，使用query获取值。
    <router-link to="/Me"><li class="aildeList" >登录</li></router-link>
        <ol>
            <router-link :to="{path:‘/Me/userName‘,query:{aaa:‘bbb‘}}"><li class="aildeList" >user</li></router-link>
        </ol>
    
    //router.js
    {
        //子组件通过绑定路径，使用query获取值。
        path:‘/me‘,
        component:Me,
        name:‘Me‘,
        children:[
            {path:":usename",name:‘user‘,component:meUser}
        ]
    },
    
    //Me/meuse.html
    <div id="user">
    <div class="topScroll"></div>
        我是me页面的子页面，我可以通过header组件中的router-link :to="{path:‘me/user‘,query:{aaa:‘bbb‘}}"
        来传递query参数，以及在路由绑定的path。
        query比name更好用。可以拉取数据库的值。name也行，但是没有query好用。
        {{$route.query.aaa}}
    </div>

 

4.页面传参，

    1.简单点就是父子组件传值。方法通过props，$emit("方法名",aguments);aguments:多个值。vuex提交数据。

5.路由钩子


 

  {
        path:‘/‘,
        component:Index,
        name:‘Index‘,
        //路由钩子，在执行这个页面之前做的事情。
        beforeEnter:(to,from,next)=>{
            console.log(to);
            console.log(from);
            next({path:‘/Product‘});
        }
    },

 

6.路由重定向


 

  {
        path:‘*‘,
        component:Page404,
        name:‘paeg404‘,
        redirect:‘Me‘ //不用‘/‘
    }
    {
        path:‘*‘,
        component:Page404,
        name:‘paeg404‘,
        redirect:bgg=>{
            const{hash,params,query}=bgg;
            if(params.id=="110") //当这个路由绑定的id是110时执行跳转。<router-link :to="{name:‘NewsN1‘,params:{id:110}}"><li>110</li></router-link>
            return ‘/‘  //跳到你想要的页面。
        }
    }

 

ajax插件请求
1.vue-resource。

    1.npm install vue-resource --save
    2.在main中引入，然后Vue.use("应用名");
    3.在new Vue({})注册。
    
```
    this.$http.get("url",)
    this.$http.get("url",{后台要的参数:参数,后台要的参数:参数...},)
```