码迷,mamicode.com
首页 > 其他好文 > 详细

Vue入门十二、路由的跳转

时间:2019-06-07 14:23:29      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:java   配置   页面   gis   utf-8   lan   back   link   set   

路由之间的跳转有再种:
1、通过标签<router-link to=‘/login‘>去登录</router-link>实现跳转
2、通过js实现:
this.$router.push({path:‘/buy‘})
this.$router.replace({path:‘/buy‘})
2.1push与replace的区别
push会向history插入新记录
replace不会插入history历史记录,如果返回上一页,则会跳转到上上一页中。上一页是不存在的
返回上一页面:this.$router.go(-1)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="vue-router.js"></script>
    <script type="text/javascript">
        var Login={
            template:`
                <div>去登录去吧</div>
            `
        }
        var Register={
            template:`
                <div>去注册去吧</div>
            `
        }
        var Buy={
            template:`
                <div>去买东西</div>
            `
        }
        // 安装插件
        Vue.use(VueRouter);
        // 创建路由对象
        var router = new VueRouter({
            // 配置路由对象
            routes: [
                {path:‘/login‘, name:‘login‘, component:Login},
                {path:‘/register‘, name:‘register‘, component: Register},
                {path:‘/buy‘, name:‘buy‘, component: Buy}
            ]
        })
        new Vue({
            el:‘#app‘,
            router,
            template:`
                <div>
                    <router-link to=‘/login‘>去登录</router-link>
                    |
                    <router-link to=‘/register‘>去注册</router-link>
                    <div>
                        <button @click="gogo">点我买东西</button>
                        <button @click="back">返回上一页</button>
</div>
                    <router-view></router-view>
</div>
            `,
            methods:{
               gogo(){
                   // 有历史记录跳转
                   // this.$router.push({path:‘/buy‘})
                   // 没有历史记录跳转
                   this.$router.replace({path:‘/buy‘})
               },
                back(){
                   // 返回上一页
                   this.$router.go(-1)
                }
            }
        })
    </script>

</body>
</html>

Vue入门十二、路由的跳转

标签:java   配置   页面   gis   utf-8   lan   back   link   set   

原文地址:https://blog.51cto.com/12012821/2406228

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!