使用Element实现路由子页面的切换跳转
如何通过路由实现子页面跳转?vue中this.$router.push和this.$route.path的区别? 如何解决在页面内点击展示的是B页面,刷新后菜单项A依然是激活状态的问题?路由子页面的path路径上加/与不加/有什么区别?如何修改element导航栏的样式?
·
想要通过Element与路由实现子页面之间的切换跳转:
1. 根据Element官网提示完成Element安装与配置
2. 选用Element中Container 布局容器
3. 选用Element中NavMenu 侧栏导航菜单放于布局容器Aside模块内
4. 配置路由(步骤如下)
- 在src下新建router文件夹并创建index.js文件
这里需要注意的是:子页面的path路径不需要加‘/’,如果加了‘/’,子页面的路径就不会拼接上父页面的路径来显示了
// 1.导入vue及vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 2.注册路由
Vue.use(VueRouter)
// 3.定义规则数组
const routes = [
{
path: '/',
name: 'index',
component: () => import('@/views/Home/index.vue'),
// 【子页面的path路径不需要加‘/’,如果加了‘/’,子页面的路径就不会拼接上父页面的路径来显示了】
children: [
{
path: '',
component: () => import('@/views/Home/home.vue')
},
{
path: 'artcategory',
component: () => import('@/views/HomeChildren/artcategory.vue')
},
{
path: 'artlist',
component: () => import('@/views/HomeChildren/artlist.vue')
},
{
path: 'userinfo',
component: () => import('@/views/HomeChildren/userinfo.vue')
},
{
path: 'changeavatar',
component: () => import('@/views/HomeChildren/changeavatar.vue')
},
{
path: 'resetpwd',
component: () => import('@/views/HomeChildren/resetpwd.vue')
}
]
}
]
// 4.生成路由对象
const router = new VueRouter({
routes
})
// 将路由对象导出
export default router
- 在main.js文件中将路由注入到实例对象
import Vue from 'vue'
import App from './App.vue'
//导入路由对象
import router from './router'
Vue.config.productionTip = false
new Vue({
router, //将路由对象注入到实例
store,
render: h => h(App)
}).$mount('#app')
5. Container 布局容器的Main区域作为路由挂载点
<!-- Main -->
<el-main>
<router-view></router-view> //router-view标签代表路由页面显示的地方
</el-main>
6. 参考NavMenu 导航菜单的属性说明Menu Attribute
- 添加router属性,使用 vue-router 的模式,在激活导航时以index作为path路径进行路由跳转
- 添加default-active属性,解决在页面内点击展示的是B页面,刷新后菜单项A依然是激活状态的问题,我这里实现的方法是做了子路由,然后使用push来控制路由跳转,跳转时使用$router.path来实现更改默认路由当前激活菜单的 index
这里跟大家提一下我们为什么要使用$route.path而不是$router
this.$router 实际上就是全局路由对象任何页面都可以调用 push(), go()等方法;
this.$route 表示当前正在用于跳转的路由器对象,可以调用其name、path、query、params等属性。
最后,如果想要修改导航栏的样式的话需要注意到el-menu-item和el-submenu是有区别的:
el-menu-item在scoped中设置值是可以的,而el-submenu在scoped中设置值不起作用
更多推荐
已为社区贡献15条内容
所有评论(0)