Vue第七天笔记整理

一级路由

<div id="app">
        <!--跳转-->
       <router-link to="/home" tag="button">home</router-link>
       <router-link to="/list" tag="button">list</router-link>
       <!---显示组件-->
       <router-view></router-view>
    </div>

    <script>
        /*
        router-link:自动渲染成a标签，
         tag:可以改变想要显示的标签
         router-link-active:改变选中的样式
        */
         let home={template:"<div>home</div>"}
         let list={template:"<div>list</div>"}
        // 1,新new一个VueRouter，可以用一个变量接受一下路由实例
         let myrouter=new VueRouter({
             //2,配置路由映射表 routes:[]是个数组
             routes:[//一级路由path必须加/
                  {path:"",component:home},
                 {path:"/home",component:home},
                 {path:"/list",component:list},
                 {path:"/*",component:home}
             ],
             linkActiveClass:'box'
         })
       
        let vm= new Vue({
            el:"#app",
            components:{
                home,list
            },
            //3,把创建好的路由挂载到vue的实例上
            router:myrouter
        })
    </script>

二级路由

 <div id="app">
        <!--跳转-->
       <router-link to="/home" tag="button">home</router-link>
       <router-link to="/list" tag="button">list</router-link>
       <!---显示组件-->
       <router-view></router-view>
    </div>
     <template id="list">
       <div>
           <router-link to="/list/xiangqing">详情</router-link>
           <router-link to="/list/addlist">添加</router-link>
           <router-view></router-view>
       </div>
     </template>
    <script>
         let home={template:"<div>home</div>"}
         let list={template:"#list"}
         let xiangqing={template:"<div>xiangqing</div>"}
         let addlist={template:"<div>addlist</div>"}
       
         let myrouter=new VueRouter({
             routes:[
                 {path:"",component:home},
                 {path:"/home",component:home},
                 {path:"/list",
                    component:list,
                    children:[//children是定义子路由用的，固定的，里面的path不能带/
                        {path:'',component:xiangqing},
                        {path:'xiangqing',component:xiangqing},
                        {path:'addlist',component:addlist}
                    ]
                 },
                 {path:"/*",component:home}
             ],
             linkActiveClass:'box'
         })
       
        let vm= new Vue({
            el:"#app",
            components:{
                home,list
            },
            router:myrouter
        })
    </script>

编程式导航

  <div id="app">
        <router-link to="/home">home</router-link>
        <router-link to="/list">list</router-link>
        <router-view></router-view>
    </div>
    <script>
         let home={
             template:"<div>home<button @click='tolist'>去列表页</button></div>",
             methods:{ 
                 tolist(){
                    this.$router.push('/list');//强制跳转
                 }
             }
           }
         let list={
             template:"<div>list<button @click='back'>返回</button></div>",
             methods:{
                 back(){
                     this.$router.back();//go(-n)回退某一级 back:返回上一级
                 }
             }
            }
         
         //1，new一个路由实例
         let router=new VueRouter({
             routes:[
                 {path:'',component:home},
                 {path:'/home',component:home},
                 {path:'/list',component:list}
             ]
         })

        let vm= new Vue({
            el:"#app",
            components:{
                home,list
            },
            router
        })
    </script>

传参

  <div id="app">
        <!---{name:'跟映射表的name名一致',params:{传递的多个参数}}-->
        <!--2, to="/home/参数"-->
        <router-link :to="{name:'pro',params:{c:1,b:2}}">home1</router-link>
        <router-link to="/home/2/3">home2</router-link>
        <router-view></router-view>
    </div>
    <script>
        let home={ //3，使用this.$route.params.xxx获取路由传进来的参数，可以简写成$route.params.xxx
            template:"<div>第{{$route.params.c}}篇文章{{this.$route.params.b}}</div>",
            watch:{
                $route(n,l){
                    console.log(n);
                    console.log('ajax');
                }
            }

        }
        
        let myrouter=new VueRouter({
            routes:[
                ///home/:c   =>this.$route{c:1}
                //1,要传递的参数名: 在路径后面加 /:xxx
                {path:'/home/:c/:b',component:home,name:'pro'}
            ]
        })

        let vm=new Vue({
            el:"#app",
            components:{
                home
            },
            router:myrouter
        })
    </script>