Vue-Router路由Vue-CLI脚手架和模块化开发 之 路由的动态跳转

在上一篇的博文中，实现的跳转是在页面中进行实现的

利用vue-router实例方法，使用js对路由进行动态跳转；

1、router.push：参数为路由对象，跳转到指定路由，跳转后会产生历史记录；

<!--动态跳转的按钮-->
            <div>
                <button @click="push">push返回首页</button>
                </div>

new Vue({
            //router : router
            router : myRouter, //4 注入路由 简写
            methods:{
                push(){

                    myRouter.push({

                        path:'/home'
                    })
                }
            }
        }).$mount("#one");

2、router.replace：参数为路由对象，跳转到指定路由，跳转后不产生历史记录；

由效果图可以发现点击replace前往美食广场按扭得时候并不会产生任何的历史记录

<!--动态跳转的按钮-->
            <div>
                <button @click="push">push返回首页</button>
                <button @click="replace">replace前往美食广场</button>
                </div>

    methods:{
                push(){

                    myRouter.push({

                        path:'/home'
                    })
                },
                replace(){
                    myRouter.replace({

                        path:'/foods'
                    })
                }
            }

3、router.go：参数为number，number为正向前跳转，为负向后跳转，根据number的值跳转到对应页面，前提是必须有历史记录可供跳转；

4、router.back：无参，后退一个页面，需要有历史记录；

router.forward：无参，前进一个页面，需要有历史记录；

使用的代码：

<!--动态跳转的按钮-->
            <div>
                <button @click="push">push返回首页</button>
                <button @click="replace">replace前往美食广场</button>

                <button @click="go(-1)">go(-)后退历史记录</button>
                <button @click="go(2)">go()前进历史记录</button>

                <button @click="back">back返回</button>
                <button @click="forward">forward前进</button>
                </div>

    methods:{
                push(){

                    myRouter.push({

                        path:'/home'
                    })
                },
                replace(){
                    myRouter.replace({

                        path:'/foods'
                    })
                },

                go(n){

                    myRouter.go(n);
                },
                back(){
                    myRouter.back();
                },
                forward(){

                    myRouter.forward();
                }
            }

以上就是通过js实现动态的跳转

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title> 路由的动态跳转</title>
 </head>
     <body>
         <div id="one">
             <router-link to="/home">首页</router-link>
             <router-link to="/foods">美食</router-link>

             <div>
                 <!--将数据显示在这里-->
                 <router-view></router-view>
             </div>
             <!--动态跳转的按钮-->
             <div>
                 <button @click="push">push返回首页</button>
                 <button @click="replace">replace前往美食广场</button>

                 <button @click="go(-1)">go(-)后退历史记录</button>
                 <button @click="go(2)">go()前进历史记录</button>

                 <button @click="back">back返回</button>
                 <button @click="forward">forward前进</button>
                 </div>
         </div>
     </body>
     <template id="foods">

         <div>

             <h2>美食广场</h2>
             <ul>
                 <router-link to="/foods/bjc/北京烤鸭/68" tag="li"> 北京菜</router-link>
                 <router-link to="/foods/hnc" tag="li"> 湖南菜</router-link>
                 <router-link to="/foods/xc?name=剁椒鱼头&price=128" tag="li"> 湘菜</router-link>
                 <router-link :to="ycParam" tag="li"> 粤菜</router-link>
                 <router-link :to="sccParam" tag="li"> 四川菜</router-link>
             </ul>

             <router-view></router-view>
         </div>
     </template>

     <script type="text/javascript" src="../js/vue.js" ></script>
     <script type="text/javascript" src="../js/vue-router.js" ></script>
     <script>

         //1 定义组件
         let Home = {
             template : "<h2>首页</h2>"
         }
         let Foods = {
             template : "#foods",
             data(){

                 return{
                     sccParam:{

                         name:'sccRouter',

                         params:{

                             name:"麻婆豆腐",
                             price:
                         }
                     },

                     ycParam:{
                         path:'/foods/yc',
                         query:{
                             name:"蜜汁叉烧",
                             price:

                         }

                     }
                 }
             }
         }

         //定义foods中的子组件

         let Bjc={

             props:['name','price'],
             template : "<h3>北京菜 菜名：{{name}} 价格：{{price}}</h3>"

         }

         let Hnc={
             template : "<h3>湖南菜  </h3>"

         }
         let Xc={
             props:['name','price'],
             template : "<h3 >湘菜  菜名：{{name}} 价格：{{price}}</h3>"

         }

         let Yc={
             props:['name','price'],
             template : "<h3>粤菜  菜名：{{name}} 价格：{{price}}</h3>"

         }

         let Scc={
             props:['name','price'],
             template : "<h3>四川菜  菜名：{{name}} 价格：{{price}}</h3>"

         }

         //2 配置路由 路由可能有多个
         const myRoutes = [
             {
                 path : "/home",
                 component : Home
             },
             {
                 path : "/foods",
                 component : Foods,

                 children:[
                 {
                     path:"bjc/:name/:price",//定义其属性
                     component:Bjc,
                     props:true

                 },
                 {
                     path:"hnc",
                     component:Hnc

                 },

                 {
                     path:"xc",
                     component:Xc,
                     props : (route) => ({
                             name : route.query.name,
                             price : route.query.price
                     })

                 },
                 {
                     path:"yc",
                     component:Yc,
                     props:{

                         name:'蜜汁叉烧量版式',
                         price:
                     }

                 },
                 {
                     name:'sccRouter',
                     path:"scc",
                     component:Scc,
                     props:true

                 }

                 ]
             },
         {
             path:"*",
                 redirect:"/home"
             }
         ]

         // 3 创建路由对象
         const myRouter = new VueRouter({
             //routes : routes
             routes : myRoutes,
             //mode:'history'
              linkActiveClass : "active"

         });

         new Vue({
             //router : router
             router : myRouter, //4 注入路由 简写
             methods:{
                 push(){

                     myRouter.push({

                         path:'/home'
                     })
                 },
                 replace(){
                     myRouter.replace({

                         path:'/foods'
                     })
                 },

                 go(n){

                     myRouter.go(n);
                 },
                 back(){
                     myRouter.back();
                 },
                 forward(){

                     myRouter.forward();
                 }
             }
         }).$mount("#one");
     </script>
     <style>

         .active{
             color: white;

             background-color: black;
         }
     </style>
 </html>

路由的动态跳转的总demo