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