vue-router +用嵌套路由实现常见的项目导航

最新推荐文章于 2022-12-23 21:17:52 发布

原创最新推荐文章于 2022-12-23 21:17:52 发布 · 569 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html #router

学习笔记专栏收录该内容

68 篇文章

订阅专栏

本文介绍如何在Vue.js项目中使用vue-router进行嵌套路由设置，以实现常见的左侧导航、右侧内容切换的布局。通过router-view标签进行组件渲染，并探讨了全局路由钩子beforeEach和afterEach在权限验证中的应用，以及子路由的用途和嵌套路由带来的内容局部更新优势。

与axios相同都是简单了解没有深入。
官方文档
 Router-API

router-view标签自动渲染匹配到的组件，可嵌套使用

项目常用嵌套路由实现常见的项目导航

嵌套路由
项目中最常见的布局如下
在这里插入图片描述
左侧是页面导航右侧是当前导航对应的页面内容，左侧不变右侧变化
很容易我们就能发现一个嵌套结构：

+-------------------------+   
| 导航   +--------------+ |   
|        |              | |    
|        | content      | |  
|        |              | |  
|        +--------------+ |    
+-------------------------+

而这用嵌套路由实现再合适不过了


const routes = [
  {
    path: '/',
    component: navigation,
    redirect: '/homepage',
    children: [
      {
        path: 'homepage',
        component: () => import('@/views/homepage')
      },
      {
        path: 'detailpage',
        component: () => import('@/views/detailpage')
      }
    ]
  },

navigation顶层布局组件，用来规划保持整个页面的布局

<template>
  <div>
    <div >
	  	<!-- 这里放左侧的导航条组件 css写好样式 -->
    </div>
    <div>
	  	<!-- 这里放右侧的内容 写好样式即可  router-view会自动渲染匹配到的组件 -->
	  	<router-view></router-view>
    </div>
  </div>
</template>

以下是官网内容：

页面使用

  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>

引入方式

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来  
import Layout from '@layout/Index';
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
  { path: '/createsheet',
    component: Layout }，
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

this.$route
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：

beforeEach和afterEac
全局路由钩子之beforeEach和afterEach：可以用来判断用户是否登录，以完成路由逻辑。
子路由路由嵌套
有什么用？理解
嵌套路由可以在整体视图不变的情况下部分内容的变化。

history模式、导航守卫、其他实例…待补完