home页面有2个子路由list和user
<template> <div class="home"> <router-view/> <router-link to="/home/list">新闻列表</router-link> <router-link to="/home/user">个人中心</router-link> </div> </template>路由处设置home的2个子路由
routes: [ { path: '/', name: 'login', component: Login }, { path: '/home', name: 'home', component: Home, children: [ { path: 'list', name: 'list', component: () => import(/* webpackChunkName: "list" */ './views/List.vue') }, { path: 'user', name: 'user', component: () => import(/* webpackChunkName: "user" */ './views/User.vue') } ] } ]当点击登录按钮后，会跳转到home下的list页面
<template> <div class="login"> <button @click="reg">登录</button> <button>注册</button> </div> </template> <script> export default { methods: { reg () { this.$router.push('/home/list') } } } </script>Vuex应用
使用Add.vue组件添加的内容会在List.vue中显示，store.js中写入
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { lists: [] }, mutations: { addItem (state, value) { state.lists.push(value) } }, actions: {} })当点击添加按钮时，触发定义在store.js中的addItem方法，这个方法需要一个value，使用对象提供，所以在Add.vue写入
<template> <div class="add"> <p>标题</p><input type="text" v-model="title"> <p>内容</p><input type="text" v-model="content"> <div class="btn" @click="add">添加</div> </div> </template> <script> import store from '@/store' export default { store, data () { return { title: '', content: '' } }, methods: { add () { store.commit('addItem', { title: this.title, content: this.content }) this.$router.push('/home/list') } } } </script>在List.vue中更新lists数据，需要监听lists的变化，所以要写在计算方法内
<template> <div class="list"> <ul> <li v-for="(item,index) of lists" :key="index">{{item.title}}-{{item.content}}</li> </ul> </div> </template> <script> import store from '@/store' export default { store, computed: { lists () { return store.state.lists } } } </script>
