欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vuerouter

程序员文章站 2022-03-25 09:55:27
...

与vuex类似
1. vuex的使用
1) 安装
script
2) 实例化store

let store =new Vuex.Store({
	state,
	getters,
	mutations,
	actions,
})
  1. store注入到vue
new Vue({
			store
		})
  1. 使用
this.$store.state
this.$store.getters
this.$store.commit
this.$store.dispatch
  1. vuerouter使用
    1) 应用
    1. 安装
    script
    npm
    2. 实例化router对象
let router = new VueRouter({
		routes:[{
			path:'/',
			component:Home
		},{
			path:'/',
			component:About
		}]
	})
  1. 设置router-view
<router-view></router-view>
  1. 使用
    1) 直接修改地址栏 localhost:8080/about
    2) 通过router-link修改地址
<router-link to="/about"></router-link>
  1. 编程
    router.push("/about")
  1. 路由表
    / -> Home.vue
    /about -> About.vue

  2. 编程式导航

router.push(path)
router.push({path:""})
router.push({name:""})
router.push({name:"",query:obj)
router.go(-1)	回退1步
router.go(1)	前进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