vue之vue-roter

    {
            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",
                        }
                    ]
                },
                
            ]
        },

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

 路由文件：
    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> //显示：你好朋友。

 //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>

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

  {
        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 ‘/‘  //跳到你想要的页面。
        }
    }