vuerouter
程序员文章站
2022-03-25 09:55:27
...
与vuex类似
1. vuex的使用
1) 安装
script
2) 实例化store
let store =new Vuex.Store({
state,
getters,
mutations,
actions,
})
- store注入到vue
new Vue({
store
})
- 使用
this.$store.state
this.$store.getters
this.$store.commit
this.$store.dispatch
- vuerouter使用
1) 应用
1. 安装
script
npm
2. 实例化router对象
let router = new VueRouter({
routes:[{
path:'/',
component:Home
},{
path:'/',
component:About
}]
})
- 设置router-view
<router-view></router-view>
- 使用
1) 直接修改地址栏 localhost:8080/about
2) 通过router-link修改地址
<router-link to="/about"></router-link>
- 编程
router.push("/about")
-
路由表
/ -> Home.vue
/about -> About.vue -
编程式导航
router.push(path)
router.push({path:""})
router.push({name:""})
router.push({name:"",query:obj)
router.go(-1) 回退1步
router.go(1) 前进1步
- 嵌套路由
路由配置
routes:[{
path:'/check',
component:Check,
children:[{
path:"waiter",
component:Waiter
},{
path:"withdraw",
component:Withdraw
}]
}]
router-view设置
App.vue
审核大厅、栏目管理
这里的view是为了接受审核大厅页面、栏目管理页面等
Check.vue
<router-view></router-view>
这里的view是为了接受员工审核、提现审核页面等
/check Check
/check/waiter Check -> WaiterCheck
/check/withdraw Check -> WithdrawCheck
上一篇: 路由守卫(导航守卫)
下一篇: VueRouter路由返回上一条问题