【vue】vue-router用法

//routes.js

import AA from './components/AA.vue'

import BB from './components/BB.vue'

import CC from './components/CC.vue'

export default[

{path:"/",component:AA

 // 子路由
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "tablet",
                component: tablet
            },
            {
                path: "computer",
                component: computer
            }
        ]

},

{path:"/BB",component:BB},

{path:"/CC/:id",component:CC,name:CC},//冒號+參數名

]

 

//AA.VUE

<router-link to="/" exact>AA</router-link>

<router-link to="/BB" exact>BB</router-link>//導航有默認樣式加exact

<router-link v-bind:to="'/cc/'+id"> //傳數據加上 v-bind

<router-link v-bind:to="'{ name: 'CC', params: { id: 123}}"> //配置name:CC

 

<router-view></router-view> //顯示route頁面

 

//接收頁CC.vue

data() {

return {

id: this.$route.params.id,

};

},

 

//路由跳轉

1.this.$router.push()

描述：跳轉到不一樣的url，但這個方法會向history棧添加一個記錄，點擊後退會返回到上一個頁面。

2.this.$router.replace()

描述：一樣是跳轉到指定的url，可是這個方法不會向history裏面添加新的記錄，點擊返回，會跳轉到上上一個頁面。上一個記錄是不存在的。

3.this.$router.go(n)

相對於當前頁面向前或向後跳轉多少個頁面,相似 window.history.go(n)。n可爲正數可爲負數。正數返回上一個頁面