Getting Vue XII routing Jump

Re-routing has to jump between species:
. 1, <to = '/ Login' Router-Link> to log </ router-link> tag implemented by jumping
2, is achieved by JS:
. $ Router.push the this ({ path: '/ Buy'})
. router.replace the this $ ({path: '/ Buy'})
2.1push and replace distinction
push will insert a new record to the history
replace not inserted history history, if Back It'll jump to the previous page. Previous is absent
Back face:. 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 () {
// jump recorded history
// this $ router.push ({path: . '/ buy '})
// no history skip
the this $ router.replace ({path:.' / Buy '})
},
Back () {
// Back
the this $ router.go (-1).
}
}
})
</ Script>

</body>
</html>

Getting Vue XII routing Jump

Guess you like