Vue路由(Vue-router)

1.1 路由

2. 前端路由

概念:根据不同的用户事件,显示不同的页面内容

本质:用户事件与事件处理函数之间的对应关系

3. 实现简易前端路由

基于URL中的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)

Vue Router(官网:https://router.vuejs.org/zh/)是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,可以非常方便的用于SPA应用程序的开发。

Vue Router 包含的功能有:

支持HTML5 历史模式或 hash 模式

支持嵌套路由

支持路由参数

支持编程式路由

支持命名路由

3. vue-router的基本使用


1. 基本使用步骤

1. 引入相关的库文件 

2. 添加路由链接

User

Register

3. 添加路由填充位

4. 定义路由组件

5. 配置路由规则并创建路由实例

6. 把路由挂载到 Vue 根实例中


4.路由重定向

路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面;通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向:


6.vue-router嵌套路由


1. 嵌套路由用法

1.1. 嵌套路由功能分析

点击父级路由链接显示模板内容

模板内容中又有子级路由链接

点击子级路由链接显示子级模板内容

效果图:

2. 父路由组件模板

父级路由链接

父组件路由填充位

3. 子级路由模板

子级路由链接

子级路由填充位

4. 嵌套路由配置

父级路由通过children属性配置子级路由


7.动态匹配路由的基本用法

应用场景:通过动态路由参数的模式进行路由匹配


8.vue-router编程式导航


1. 页面导航的两种方式

声明式导航:通过点击链接实现导航的方式,叫做声明式导航 例如:普通网页中的链接 或 vue 中的

编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航 例如:普通网页中的 location.href 

2. 编程式导航基本用法

常用的编程式导航 API 如下:

this.$router.push('hash地址')

this.$router.go(n)

路由导航守卫

例如登录:我们不希望在未登录时(就是没有当前用户的token)就可以访问其他页面

使用router.beforeEach()

创建router对象

const router = new VueRouter();

// 挂载路由导航守卫

router.beforeEach((to, from, next) => {

// to 将要访问的路径

// from 代表从哪个路径跳转而来

// next 是一个函数,表示放行

// next() 放行 next('/login') 强制跳转

// 判断用户访问的是否是登录页

if (to.path === '/login') return next()

// 获取token

const tokenStr = window.sessionStorage.getItem('token')

if (!tokenStr) return next('/login')

next()

})

你可能感兴趣的:(Vue路由(Vue-router))