【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可为正数可为负数。正数返回上一个页面