vue路由--使用router.push進行路由跳轉

時間 2019-11-08

標籤 vue 路由使用 router.push router push 進行欄目系統網絡简体版

原文原文鏈接

手機賺錢怎麼賺,給你們推薦一個手機賺錢APP彙總平臺:手指樂(http://www.szhile.com/),辛苦搬磚之餘用閒餘時間動動手指,就能夠日賺數百元javascript

route-link是在html中靜態定義的，也能夠在代碼中動態跳轉：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>abc</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <h1>Hello App!</h1>
        <!-- 路由出口 -->
        <!-- 路由匹配到的組件將渲染在這裏 -->
        <router-view>
        </router-view>
    </div>
</body>
<script type="text/javascript">
// 0. 若是使用模塊化機制編程，導入 Vue 和 VueRouter，要調用 Vue.use(VueRouter)

// 1. 定義（路由）組件。
// 能夠從其餘文件 import 進來
// const Foo = { template: '<div @onclick="pushtest" href="">Go to Bar</a>' }
// const Bar = { template: '<div @onclick="pushtest" href="">Go to Foo</a>' }

const Foo = Vue.extend({
    template: '<a @click="pushtest" href="javascript:void(0)">Navigate to bar</a>',
    methods: {
        pushtest() {
            //alert("bar");
            this.$router.push({ name: 'bar' });
            //alert("fdas");
        },
    },

});

const Bar = Vue.extend({
    template: '<a @click="pushtest" href="javascript:void(0)">Navigate to foo</a>',
    methods: {
        pushtest() {
            //alert("foo");
            this.$router.push({ name: 'foo' });
            //alert("fdas");
        },
    },
});

// 2. 定義路由
// 每一個路由應該映射一個組件。 其中"component" 能夠是
// 經過 Vue.extend() 建立的組件構造器，
// 或者，只是一個組件配置對象。
// 咱們晚點再討論嵌套路由。
const routes = [
    { path: '/', redirect: "/bar" },
    { path: '/foo', name: "foo", component: Foo },
    { path: '/bar', name: "bar", component: Bar },

]

// 3. 建立 router 實例，而後傳 `routes` 配置
// 你還能夠傳別的配置參數, 不過先這麼簡單着吧。
const router = new VueRouter({
    routes // （縮寫）至關於 routes: routes
})

// 4. 建立和掛載根實例。
// 記得要經過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
    router, // （縮寫）至關於 router: router
    //  methods: {
    //     pushtest:function() {
    //         alert("fdas");
    //     },
    // },
    watch: {
        $route(to, from) {
            //alert(to.path);
            //document.getElementById("testzy").innerText = this.$route.params.id;
        }
    },

}).$mount('#app') // 如今，應用已經啓動了！
</script>

</html>

注意絕對不能寫href="",這樣執行click跳轉後，又會執行href跳轉到當前頁面html

push也能夠直接使用path:vue

this.$router.push('/foo');

push會向history添加一條新記錄，此時後退會跳轉到前一個組件

router.replace(location)跟push功能相似，可是不會向history添加一條新記錄，不能後退java

router.go(n)vue-router

這個方法的參數是一個整數，意思是在 history 記錄中向前或者後退多少步，相似 window.history.go(n)。編程

// 在瀏覽器記錄中前進一步，等同於 history.forward()
router.go(1)

// 後退一步記錄，等同於 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 若是 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。